如何使用Webpack在其他CSS中更正@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";