修复编译时 React 应用程序中的 scss 路径问题答案

【问题标题】：Fix scss path issues in react app while compiling修复编译时 React 应用程序中的 scss 路径问题
【发布时间】：2022-01-06 15:57:15
【问题描述】：

my-react-app
|_public
|  |_assets
|    |_style.scss
|    |_elements
|      |_ _test.scss
|_src
   |_index.scss
   |_index.js

这是我的 react 应用程序的文件夹结构 index.js

import './index.scss';

index.scss

@import "../public/assets/style";

style.scss

@import url(elements/_test.scss);

_test.scss

body {
    background-color: pink;
}

错误：

Failed to compile.

./src/index.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/index.scss)
Error: Can't resolve 'elements/_test.scss' in 'C:\Users\j**\my-app\src'

如何正确导入所以我没有收到上述错误

【问题讨论】：

标签： css reactjs webpack sass scss-mixins

【解决方案1】：

无法读取scss，需要链接css文件。你可以用 vs 代码插件来做我使用 Live scss 编译器它工作正常（它将你所有的样式保存在一个文件中）。或在此处转换它们：https://jsonformatter.org/scss-to-css

【讨论】：