2

我尝试在我的反应项目中导入引导程序，但它不起作用。首先，我有这个错误

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\wamp\www\project\node_modules\bootstrap\dist\css\bootstrap.css Line 9: Unexpected token :
You may need an appropriate loader to handle this file type.
| html
| {
|     font-family: sans-serif;
|
|         -ms-text-size-adjust: 100%;
 @ ./src/client/app/index.jsx 11:0-43

所以我用 npm 安装了 css-loader 更新了我的 webpack.config.js，如下所示：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.css$/, // Only .css files
        loader: 'css-loader'
      }
    ]
  }
};

module.exports = config;

现在，我收到此错误消息：

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:4886-4938 6:4963-5015

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5065-5119

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5150-5203

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5233-5285

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5319-5371

我不明白如何正确配置 webpack.config.js。

有人对我的问题有答案吗？

4

1 回答 1

2

加载CSS需要css-loader和style-loader。他们有两个不同的工作。将css-loader遍历CSS文件并找到url()表达式并解决它们。这style-loader会将原始 css 插入页面上的样式标记中。所以你需要他们两个。
用这个

{
      test: /\.css$/, // Only .css files
      loader: 'style!css' // Run both loaders
}

您还需要将它们作为依赖项安装在 package.json 文件中。您可以使用（如果尚未完成）来执行此操作

npm install css-loader style-loader --save
于 2016-02-10T13:13:09.617 回答