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 上查看的一些內容：

• 模塊構建失敗（來自./node_modules/postcss-loader/src/index.js）
• 模塊構建失敗（來自./node_modules/css-loader/dist/cjs.js）：CssSyntaxError
• 模塊構建失敗（來自./node_modules/sass-loader/dist/cjs.js）
• Webpack：出現此錯誤：構建失敗（來自./node_modules/css-loader/dist/cjs.js）：

我的節點版本是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

檢查您是否安裝了所有這些軟件包：

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. 節點薩斯（ https://www.npmjs.com/package/node-sass ）

您可能缺少node-sass

Answer 2

這就是我為解決我的問題所做的。 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真的有幫助。 由於 package 正在處理 JavaScript，我沒有在我的文件中這樣做。 但是由於sass-loader中也提到了 package，所以我會保留它。

使用@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;
}

如需進一步閱讀，請查看他們在@use上的文檔。