包括在 Webpack 生产中不起作用的 node_modules css 文件答案

【问题标题】：Including node_modules css files not working in Webpack production包括在 Webpack 生产中不起作用的 node_modules css 文件
【发布时间】：2017-06-26 12:37:16
【问题描述】：

我的代码包括来自node_modules 的一些 CSS，就像这样

import React, { PropTypes } from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import styles from '../css/SeekBar.css';

我正在从 node_module rc-slider 导入 css 文件 rc-slider/assets/index.css。这适用于我的 Webpack 配置的开发

  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    include: [path.join(__dirname, '..', 'node_modules')],
  },

但是在我的生产配置中，这不起作用

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            module: true,
            localIdentName: '[path][name]__[local]___[hash:base64:5]',
          },
        },
        {
          loader: 'postcss-loader',
          options: { plugins: postCSSConfig },
        },
      ],
    }),
  },
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    include: [path.join(__dirname, '..', 'node_modules')],
  },

错误如下

   Child extract-text-webpack-plugin:
           [0] ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css 988 bytes {0} [built] [failed] [1 error]

        ERROR in ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css
        Module build failed: Unknown word (5:1)

          3 | // load the styles
          4 | var content = require("!!./../../css-loader/index.js!./index.css");
        > 5 | if(typeof content === 'string') content = [[module.id, content, '']];
            | ^
          6 | // add the styles to the DOM
          7 | var update = require("!./../../style-loader/addStyles.js")(content, {});

如果我删除

 {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    include: [path.join(__dirname, '..', 'node_modules')],
  },

从生产 Webpack 配置来看，没有错误，但样式未从 rc-slider/assets/index.css 应用。

【问题讨论】：

标签： css node.js webpack

【解决方案1】：

解决了

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[path][name]__[local]___[hash:base64:5]',
          },
        },
        {
          loader: 'postcss-loader',
          options: { plugins: postCSSConfig },
        },
      ],
    }),
    include: [path.join(__dirname, '..', 'app')],
    exclude: [path.join(__dirname, '..', 'node_modules')],
  },
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader'],
    }),
    include: [path.join(__dirname, '..', 'node_modules')],
    exclude: [path.join(__dirname, '..', 'app')],
  },

【讨论】：