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

我将用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

试试你的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 2

你已经在node_modules中排除了css-loader的webpack.config.js 。 可能你必须包含你需要处理的node_modulespath。 像这样的东西：

 { 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 3

我终于find了修复，可以帮助你：

荤荤是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" }) ], };