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

【问题标题】：Webpack 5 sass-loader not compiling nested scss filesWebpack 5 sass-loader 不编译嵌套的 scss 文件
【发布时间】：2022-01-16 02:48:54
【问题描述】：

我是第一次设置 Webpack，但在 Sass 部分卡住了。

我有这样的文件结构：

src (目录)
- 样式（目录）
  - 实用程序（目录）
    - test.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 中使用导入，它不会编译。

import './styles/utilities/test.scss';
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']
  }
};

【问题讨论】：

标签： webpack sass sass-loader

【解决方案1】：

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

当我用 @use 替换 @import 时，它开始工作了。

【讨论】：