我正在使用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',
    })
  ]
};