javascript - 如何合并所有导入到不同 JS 组件的 .SCSS 文件并将它们输出到单个 .CSS 包?
问题描述
我正在开发一个使用纯 JS(无框架)和 SCSS 并将其与 Webpack 捆绑在一起的项目。
结构大致是这样的:
│ index.html
│ index.js
│ webpack.config.js
│
├───build
│ app.bundle.js
│ bundle.css
│ error.bundle.js
│ index.html
│
└───src
├───components
│ │ App.js
│ │
│ └───ErrorMessage
│ error.scss
│ ErrorMessage.js
└───style
footer.scss
header.scss
index.scss
reset.scss
我唯一的入口点是index.js
初始化应用程序。index.scss
被导入App.js
.
在我将 ErrorMessage 的样式移到单独的组件之前,这一切都运行良好。
这是我的 webpack 配置:
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = [{
entry: {
app: ['@babel/polyfill', './index.js']
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-proposal-class-properties'],
presets: ['@babel/preset-env']
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: ['./node_modules']
}
}
}
]
}
]
},
}];
我要做的是直接将该组件的样式导入到ErrorMessage.js
但仍将其编译到bundle.css
并保留单个入口点。但是,当我运行 webpack 构建时,它只会编译error.css
到bundle.css
文件中。有没有办法像这样解析所有 .scss 文件?
解决方案
为什么不只创建 1 个入口点 scss 文件,然后将所有内容都包含到该 scss 文件中?然后你只需要将该入口文件导入到你的js文件中
以下是我的webpack配置供您参考
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"
}
]
}
]
}
推荐阅读
- processing - Neovim 如何从 Powershell 调用命令?
- javascript - 为什么我们需要在 rxjs observable 中实现 unsubscribe?
- javascript - backdraft 组件是否对插入它的 dom 元素有任何可见性?
- python - XPath 文本和节点按实际顺序排列
- python - Python Pandas 仅对列进行分组
- javascript - 在没有外部包的 Javascript 中将带时区的时间戳字符串转换为 UTC
- c - Fmod 不能按预期工作(c 编程)
- python - pandas.apply 的 Python 问题,寻找替代建议或帮助解决问题
- rdf - 替换 rdf:aboutEachPrefix
- javascript - Auth0 loginWithPopup() 验证用户但不验证 loginWithRedirect()