我正在使用webpack与css-loader和sass-loader结合来编译和捆绑scss文件 . 在我的模块中,我创建了文件“main.scss”,其中包含了jquery ui的css代码和我自己的一些css代码 . 我用这个命令导入jquery ui css .
@import "~jquery-ui/themes/base/all";
jquery ui模块中的文件“all.css”如下所示 .
@import "base.css";
@import "theme.css";
当我运行构建时,webpack在jquery模块中成功找到文件“all.css”,但它试图在我运行的自定义模块的目录中找到两个文件“base.css”和“theme.css”构建 . 但自然这些文件也可以在jquery模块目录中找到 . 有没有办法告诉webpack始终评估相对于导入文件本身路径的导入?
这是我的webpack配置:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ['./src/css/main.scss'],
module: {
rules: [
{ // css / sass / scss loader for webpack
test: /\.(css|sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
})
]
};