如何使用 Webpack 更正其他 scss 中的 @import scss 文件

Question

我使用 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。
在 ...\node_modules\library_name\src\assets\scss\styles.scss 的第 5 行

Answer 1

https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

所以对于引导程序：

@import "~bootstrap/scss/bootstrap.scss";