Javascript Webpack未绑定来自节点_模块的css
我正在将react网站迁移到Webpack4(从第3页),但在使用WebpackforCSS时遇到了一些奇怪的问题 对于我自己编写的css来说,它工作得很好,但是node_模块中任何来自第三方组件的css似乎都没有包含在内 以下是我的网页包配置示例:Javascript Webpack未绑定来自节点_模块的css,javascript,css,reactjs,web,webpack,Javascript,Css,Reactjs,Web,Webpack,我正在将react网站迁移到Webpack4(从第3页),但在使用WebpackforCSS时遇到了一些奇怪的问题 对于我自己编写的css来说,它工作得很好,但是node_模块中任何来自第三方组件的css似乎都没有包含在内 以下是我的网页包配置示例: const webpack = require('webpack'); const path = require('path'); const LodashModuleReplacementPlugin = require('lodash-webp
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
}
},
'postcss-loader'
]
},
{
test: /\.css$/,
include: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: true,
}
}
]
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.jpg$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/jpg'
}
}
]
},
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '@hot-loader/react-dom'
},
modules: [
'node_modules',
],
},
devServer: {
contentBase: './dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new LodashModuleReplacementPlugin,
new HtmlWebpackPlugin({
template: require('html-webpack-template'),
inject: false,
appMountId: 'app',
})
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
module.exports = (env, argv) => {
if (argv.hot) {
// Cannot use 'contenthash' when hot reloading is enabled.
config.output.filename = '[name].[hash].js';
}
return config;
};
生成的包中只包含来自我自己文件的css
我使用的是最新版本:
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
非常感谢您的帮助
您是如何从软件包中导入CSS的?我不是专门从软件包中导入任何CSS。在上一个项目中,所有的css都被提取到一个大的包中(使用ExtractTextPlugin,现在已经弃用)。我原以为它现在也能用,但也许我错过了什么?啊啊啊。。。在迁移项目时,我确实错过了一个引导的css导入。添加了它,现在一切正常了!:)谢谢你指出!