SASS 錯誤導入“變量”。 SassError：找不到要導入的樣式表

Question

我面臨一個特定的問題。 我試圖將html和CSS文檔發送到我的反應項目中。 問題是

    ./src/scss/app.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/scss/app.scss)
    SassError: Can't find stylesheet to import.
      ╷
    1 │ @import 'variables';
      │         ^^^^^^^^^^^
      ╵
      src\scss\components\_header.scss 1:9  @import
      src\scss\components\_all.scss 1:9     @import
      src\scss\app.scss 5:9                 root stylesheet

原始錯誤圖像截圖

Answer 1

您應該使用文件的完整路徑和擴展名導入它。 例如：

@import './variables.scss';

如果您使用的是 create-react-app 或 node，您可能需要檢查是否安裝了node-sass 。 更多信息： https ://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Answer 2

編輯：

我在下面添加了一個可能與您的用例無關的答案，但是當我開始查看您的屏幕截圖時，您的文件似乎被命名為_variables.scss ，它是部分文件，並且是使用@use規則導入的。 你能試試@use "variables"; ? https://sass-lang.com/guide

---

原始答案：

我在使用 Nx 和 sass-loader 運行 Storybook 時遇到了這個問題：

ModuleBuildError: Module build failed (from ../../../node_modules/@nrwl/web/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "variables";
  │         ^^^^^^^^^^^

更改為相對導入有效，但我的代碼中到處都是@import "variables" ，並且不想到處更改為@import "../../../styles/variables.scss" 。 我終於能夠通過webpackFinal .storybook/main.js中的 webpackFinal 向 webpack 配置添加別名來解決它：

// .storybook/main.js

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      'variables': path.resolve(__dirname, '../styles/variables.scss')
    }
    return config;
  },
};

使用的版本：

"@nrwl/cli": "13.2.3"
"@nrwl/storybook": "13.2.3"
"@storybook/addon-essentials": "6.3.0"
"@storybook/builder-webpack5": "6.3.0"
"@storybook/manager-webpack5": "6.3.0"
"@storybook/react": "6.3.0"
"sass-loader": "13.0.0"

webpack 解析別名文檔： https ://webpack.js.org/configuration/resolve/#resolvealias