css-loader：来自节点模块的css的意外标记

Question

我将用Github问题风格解释我的问题：

目前的行为是什么？

无法加载css。 完整的错误消息：

如果当前行为是错误，请提供重现的步骤。
我的package.json： https ： //gist.github.com/jy95/99377c113252e6baaa23087abe859814
我的webpack.config.js： https ：//gist.github.com/jy95/16b0f03d46b087c6f2640c8e9178914f

请提及其他相关信息，例如浏览器版本，Node.js版本，webpack版本和操作系统。
节点：6.10.3
操作系统：Windows 10

PS：在你告诉我看ExtractTextPlugin之前，我想解释为什么我收到这个错误（我也试图在我的条目中需要css：app.js，同样的结果）

Answer 1

您已在node_modules为css-loader排除了webpack.config.js 。 可能您必须包含需要处理的node_modules那些路径。 像这样的东西：

{
  test: /\.css$/,
  use: 'css-loader',
  exclude: /node_modules/,
  include: [
    'node_modules/admin-lte/dist/css/skins/skin-blue.min.css',
    <place here others you need>
  ],
}

可能会出现有关根文件夹的一些问题，请检查您的系统。

Answer 2

在webpack.config.js中试试这个

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];

 module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         },
         {
             test: /\.(scss|sass)$/,
             loader: scssLoader,
             include: [__dirname]
           },
           { test: /\.css$/,
             loader: postcssLoader,
             include: [__dirname]
           }
      ]

   }

Answer 3

我终于找到了修复，可能对你有所帮助：

罪魁祸首是v2.0.1中的postcss-loader，将其更新为2.0.5测试（ https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/498 ）

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } }
];

// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
  entry: {
    app: './app.js',
    // if any on these are just for css remove them from here and require(with absolute path) them from app.js
    vendor: [
      'babel-polyfill',
      'admin-lte',
      'admin-lte/bootstrap/js/bootstrap.min.js',
      'lobibox/dist/js/notifications.min.js',
      'admin-lte/plugins/fastclick/fastclick.js',
      'moment',
      'moment/locale/fr.js',
      'moment-timezone',
      'eonasdan-bootstrap-datetimepicker',
      'bootstrap-table',
      'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
      'parsleyjs',
      'parsleyjs/dist/i18n/fr.js',
      'bootstrap-daterangepicker',
      'socket.io-client',
      'jquery-confirm',
      'push.js',
      'lodash',
      'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
      'tableexport.jquery.plugin'
    ]
  },
  //devtool: 'eval', // for test in the browser
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')//,
    //pathinfo: true
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.html$/,
      use: ['raw-loader', 'html-minifier-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      use: 'json-loader',
      exclude: /node_modules/
    }, {
      test: /\.(scss|sass)$/,
      use: ExtractTextPlugin.extract({
            fallback: scssLoader[0], // style-loader
            use: scssLoader.slice(1) // [ 'css-loader', 'sass-loader' ]
        })
    },{ 
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
      })
    }, {
      test: /\.(jpg|png|gif)$/,
      use: 'file-loader'
    }, {
      test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    }],
  },
  plugins: [
    new ExtractTextPlugin({
        filename: 'app.bundle.css',
        allChunks: true
    }),
    new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
    })
  ],
};