小编bpr*_*dev的帖子

我是第一次设置 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'),
  }, …