我正在使用React / Node和CSS模块实现服务器端渲染。
我引入了mini-css-extract-plugin从JS中提取CSS,并且该插件未在公共文件夹(或任何位置)中创建CSS文件。
/package.json
{
....
"main": "webpack.config.js",
"scripts": {
"server": "babel-node ./src/server/index.js",
"client": "webpack --watch --progress",
"start": "yarn server & yarn client"
},
...
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.0",
"@babel/node": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"babel-loader": "^8.0.5",
"babel-plugin-css-modules-transform": "^1.6.2",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"react-frontload": "^1.0.7",
"react-loadable": "^5.5.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-node-externals": "^1.7.2"
}
}
/webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'production',
entry: './src/client/index.js',
target: 'node',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'build.js',
publicPath: '/',
},
resolve: {extensions: ['.js', '.css']},
watch: false,
plugins: [new MiniCssExtractPlugin({filename: 'styles.css'})],
module: {
rules: [
{
test: /\.css$/,
sideEffects: true,
use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader'],
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
cacheDirectory: true
}
}
]
}
}
/。babelrc
{
"presets": ["@babel/env", "@babel/react"],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
["css-modules-transform", {
"generateScopedName": "[name]__[local]___[hash:base64:5]"
}]
]
}
我希望看到在/public/styles.css中创建了以下文件,并且现在在该文件夹或其他任何位置都没有文件被创建。感谢您的帮助!
答案 0 :(得分:0)
检查我的以下配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
}
]
}
如果您仍有问题,请告诉我