reactjs - 带有 css 加载器的 Webpack 配置

Question

我一直在使用这个 webpack 配置来加载 babel 和 css 加载器，但出现错误。如果我只使用 babel 加载器，但 css 加载器不起作用，我的 webpack 配置工作得很好。

var path = require('path');

var config = {
   entry: './main.js',

   output: {
      path : path.join(__dirname, './'),
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader',
         }
      ]
   }
}

module.exports = config;

我在运行 webpack 时遇到的错误是

ERROR in ./~/css-loader!./main.js 

错误截图

Answer 1

.css您需要为不匹配的导入配置 CSS 加载器.jsx。现在您将一个 JavaScript 文件传递​​给css-loader，它不是有效的 CSS，所以它失败了。正确的加载器配置是：

module: {
    loaders: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
      }
    ]
}

Answer 2

你的 webpack 配置中需要样式加载器：

我的一个项目的示例：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css")
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!sass")
            },
        ],
    },
...