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

Posted 2023-02-22

【中文标题】Webpack 5 sass-loader 不编译嵌套的 scss 文件

【英文标题】：Webpack 5 sass-loader not compiling nested scss files

【发布时间】：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']
  
;

【参考方案1】：

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

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