我正在为我的 JS 和 SASS 使用 webpack,它工作正常。但现在我希望 CSS 作为独立的样式表文件而不是内联样式。我必须在我的 webpack 设置中更改什么才能实现此目的?
这是我当前总结的 webpack 配置:
{
entry: {
'plugin': './src/js/index.js',
},
output: {
filename: '[name].js',
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
}]
}]
}
}
我用过SASS Loader的官方文档我从Style Loader知道我也必须使用文件加载器的文档。但我已经学不会了,需要你的帮助。我所有的试错配置都失败了。
感谢您的帮助!
您必须安装 mini-css-extract-plugin
才能从 js 文件中删除 css 并将它们放入单独的 .css 文件中。
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // <--- INSTALL THIS
module.exports = {
entry: {
'plugin': './src/js/index.js',
},
output: {
filename: '[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
plugin: [
new MiniCssExtractPlugin()
]
}
我是一名优秀的程序员,十分优秀!