[英]node_modules CSS files not compiling in production Webpacker
[英]Including node_modules css files not working in Webpack production
我的代碼包括來自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
。
通過做解決
{
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')],
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.