Question

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

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。

任何人都能解答我的问题吗？

Answer 1

加载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

导入bootstrap与webpack反应

1 个答案: