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
OS: Windows 10

PS：在你告诉我使用 ExtractTextPlugin 查看之前，我想解释一下为什么会出现此错误（我还尝试在我的条目中要求 css：app.js , 结果相同 )

Answer 1

您已在 webpack.config.js 中为 css-loader 排除了 node_modules。可能您必须包括来自 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"
    })
  ],
};

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

css-loader : Unexpected token of css coming from node module

css

node.js

webpack

css-loader