Webpack 无法解析 scss/css 的 @import

Posted 2023-02-22

【中文标题】Webpack 无法解析 scss/css 的 @import

【英文标题】：Webpack can't resolve @import of scss/css

【发布时间】：2021-04-25 20:02:45

【问题描述】：

我有一个主样式表 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，就完全不行了。

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

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"
  ,

【参考方案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.

【参考方案2】：

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

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

您可能缺少 node-sass

【讨论】：

如果我不是从 JavaScrip 文件中调用它，为什么我需要 node-sass 或 sass？我不明白我需要一个 API。

***.com/questions/49632291/sass-loader-and-webpack-4@Mähnenwolf

对，但这不是我的问题。在我尝试将另一个文件导入我的样式表之前，我得到了我的 *.css 文件。当我尝试将第二个 scss 文件导入我的主 scss 文件时，一切正常，唯一的问题开始了。

@import "./blocks/SCSS/test" 在你的 css 文件中导入时不要 .scss 扩展名sass-lang.com/documentation/at-rules/import