create-react-app 使用 SASS_PATH 在 .env 中触发控制台警告

huus2vyu 于 6个月前发布在 React

关注(0)|答案(5)|浏览(61)

使用SASS在https://create-react-app.dev/docs/adding-a-sass-stylesheet中的文档提到，我可以创建一个带有SASS_PATH选项的.env文件，这样当我在SCSS中导入文件时，就不需要使用相对路径，只需使用例如@import 'vars'。
然而，当我使用SASS_PATH时，在使用npm run start启动应用程序时会收到很多警告信息。

WARNING in ./src/components/Content/Content.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/Content/Content.module.scss)
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "src/styles/_vars.import"
 * "src/styles/_vars.import.css"
 * "src/styles/_vars.import.sass"
 * and more ...

环境

Environment Info:

  current version of create-react-app: 5.0.1
  running from /Users/martinsikora/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: ^5.0.1 => 5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

重现步骤

按照https://create-react-app.dev/docs/adding-a-sass-stylesheet中的描述创建SASS_PATH`变量。

预期行为

不应该打印任何警告。

实际行为

在控制台打印出很多警告信息。

可复现示例

(粘贴链接到示例项目并提供确切的说明以重现问题。)

create-react-app

来源：https://github.com/facebook/create-react-app/issues/12635

5条答案

按热度按时间

z2acfund1#

将 SASS_PATH=src 添加到您的 .env 文件中，假设您的 SASS 文件代码位于 src 文件夹中。将相同的变量添加到您可能使用的任何其他本地环境文件中，例如 .env.development。
在您的 .scss 文件中，使用绝对语法导入，例如 @import "src/scss/variables"; 而不是 @import "scss/variables";。