javascript - Webpack 无法解析@import of scss/css

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，这是我最先遇到的错误。现在我将我的 Node 更新到 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 的方式可能是错误的。我试图以 native 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.