Webpack 无法解析 scss/css 的 @import

Question

我有一个主样式表 style.scss，我将它导入到我的主 JavaScript 文件 script.js：

import "./style.scss";

这很好用，我可以在开发模式下以这种方式构建我的网站。 现在我想尝试使用单独的样式表并使用 @import 规则将它们导入我的主样式表中，如下所示：

@import "./blocks/SCSS/test.scss" screen and (min-width: 600px);

但现在我收到此错误消息：

ERROR in ./dev/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./dev/style.scss)  
Module build failed (from ./node_modules/css-loader/dist/cjs.js):  
Error: Can't resolve './blocks/SCSS/test.scss' in 'D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev\dev'

而且我不明白为什么它不能解决它。我也为我的 JavaScript 使用模块，效果很好。但是现在有了 SCSS，就完全不行了。

我尝试在谷歌上搜索解决方案并检查了几个打开的线程，没有一个可以帮助我。
以下是我在 Stackoverflow 上查看的一些内容：

• Module build failed (from ./node_modules/postcss-loader/src/index.js)
• Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
• Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
• Webpack: getting this error: build failed (from ./node_modules/css-loader/dist/cjs.js):

我的 Node 版本是 12.18.3，我首先遇到了错误。现在我将我的节点更新为 LTS 到 14.15.4，仍然是同样的错误。

这是我的 Webpack 配置文件：

// webpack.common.js

const path = require("path");

module.exports = {
  entry: "./dev/script.js",
  
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
      {
        test: /\.(svg|png|jpg)$/i,
        use: {
          loader: "file-loader",
          options: {
            esModule: false,
            name: "[name].[hash].[ext]",
            outputPath: "assets/images",
          },
        },
      },
    ],
  },
};


// webpack.dev.js

const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./dev/post.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devServer: {
    contentBase: "./dist",
  },
  output: {
    filename: "script.dev.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "./",
  },
});

这是我的 webpack 依赖项：

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.1",
    "webpack-merge": "^5.7.3"
  },

Answer 1

这就是我解决问题的方法。 Amaresh 已经提到了一些关于我可能缺少的东西，但这并没有帮助我解决我的问题，因为我没有得到任何关于为什么会有帮助的真正解释。
最后，我确实安装了sass*，由于node-sass已被弃用，所以我没有在意。

我使用@import 的方式可能是错误的。我试图以原生 CSS 方式 (MDN)，但 SCSS 可能已经覆盖了它。 SCSS 的@import 现在也已弃用，不推荐使用。当我重新检查 SCSS 网站时，我查看了他们的如何使用 SCSS 的指南，他们提到了我可以如何使用 @use 导入另一个样式表。我学到的是我需要使用Partials。我必须在文件名前加上下划线来为其创建命名空间，然后使用@use 规则将其导入。

从他们的例子中：

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

* 我不知道sass 的安装是否真的有帮助。由于该包正在处理 JavaScript，我没有在我的文件中这样做。但是由于sass-loader中也提到了这个包，所以我会保留它。

使用@use 时要记住的重要一点是您如何处理新文件中的文件。

// src/_list.scss
@mixin list{
    ul {
        display: flex;
        flex-direction: row;
        li {
            text-align: center;
            padding: 5px;
        }
    }
}

通过仅调用 URL，您必须指定命名空间，然后指定要从该命名空间使用的内容。

// styles.scss
@use "src/list";

header {
  @include list.list;
}

你可以调用一个新的命名空间并给它一个自定义的名字。

// styles.scss
@use "src/list" as myList;

header {
  @include myList.list;
}

或者您可以调用它并用星号命名，使其可用，而无需在调用时编写命名空间。

// styles.scss
@use "src/list" as *;

header {
  @include list;
}

如需进一步阅读，please check out their documentation on @use.

Answer 2

检查你是否安装了所有这些包：

1. sass (https://www.npmjs.com/package/sass)
2. sass-loader (https://www.npmjs.com/package/sass-loader)
3. css-loader (https://www.npmjs.com/package/css-loader)
4. 样式加载器(https://www.npmjs.com/package/style-loader)
5. node-sass (https://www.npmjs.com/package/node-sass)

您可能缺少 node-sass