Webpack 5 sass-loader 不编译嵌套的 scss 文件

Question

我是第一次设置 Webpack，但我陷入了 Sass 部分。

我有这样的文件结构：

• 源代码（目录）
  • 样式（目录）
    • 实用程序（目录）
      • 测试.scss
  • index.scss（位于 src 的根目录中）
  • index.js（位于 src 的根目录中）

test.scss里面有这个：

$blue: dodgerblue;

body {
  background-color: $blue;
}

index.scss有这个：

@import url("./styles/utilities/test.scss");

我的入口文件index.js如下，如果我在 #1 中使用导入，它可以工作，scss 可以正确编译，但如果我在 #2 中使用导入，它就无法编译。

1. import './styles/utilities/test.scss';
2. import './index.scss';

#1 的输出如下所示：

body {
  background-color: dodgerblue;
}

#2 的输出如下所示：

body {
  background-color: $blue;
}

为什么会发生这种情况？最终，我希望能够将样式表组织在不同的文件夹中，并能够将它们全部编译成 css。

我的 webpack.config.js 看起来像这样：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'assets'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: {autoprefixer: {}}
              }
            }
          },
          "sass-loader"
        ]
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: "index.css"
  })],
  resolve: {
    extensions: ['.js', '.scss']
  }
};

Answer 1

我刚刚想通了。我们应该使用Sass 模块而不是@import. 另外，这个视频对我帮助很大：https://www.youtube.com/watch ?v=CR-a8upNjJ0

当我更换@import它时@use开始工作。