webpack - 如何在 style.scss 中使用 @import 配置 Webpack?
问题描述
将@import 添加到 style.scss webpack 返回 ModuleBuildError 时,谁能帮我解决 Webpack 设置中的问题。
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: path.join(__dirname, 'src', 'webpack_entry_point'),
},
output: {
filename: 'bundle.[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
})
],
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: path.resolve()
},
{
test:/\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
}
};
webpack_entry_point.js
import './webpack_style.scss';
webpack_style.scss
@import 'css/style';
解决方案
问题是因为图像文件夹 ./src/images 是空的,而我的 webpack.config.js 没有像这样的文件加载器:
{
test: /\.(jpe?g|png|gif|bmp|webp)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: path.join('assets', 'images'),
publicPath: path.join('assets', 'images')
}
}
]
},
推荐阅读
- c# - 当我点击播放时,我的 Sprite 角色会旋转。为什么?
- jquery - Facebook sdk 脚本无法重新加载
- c# - 取消授权时重定向
- c++ - C++ std::vector 迭代器行为奇怪,不允许递增
- java - Spring data redis (with lettuce) 创建包装库的优势
- typescript - 如何获取整个函数的类型,而不仅仅是 Parameters 或 ReturnType
- flutter - 如何在 Flutter 中的 TextFormField 标签中添加红色星号
- html - 如何始终在 url 的下拉列表中获得第二个选择
- arrays - 使用每个循环将集合写入所有工作表
- python - Lambda 只能有一个表达式,那么为什么它在表达式中使用 if/else