[英]How to correct @import scss file inside other scss using Webpack
我使用 Webpack 编译我的 SCSS 文件,基于最简单的方法:
module.exports = {
entry: './src/home.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
}
]
}
};
src/home.js
文件的完整内容:
import 'library_name/src/assets/scss/styles.scss';
styles.scss
的片段代码如下:
@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
因此,当我运行webpack
命令时,我收到错误消息:
SassError:找不到或无法读取要导入的文件:../../../node_modules/bootstrap/scss/bootstrap.scss。
在第 5 行...\node_modules\library_name\src\assets\scss\styles.scss
https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules
所以对于引导程序:
@import "~bootstrap/scss/bootstrap.scss";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.