2

我正在使用creacte-react-app 2.0.0-next.66cc7a90,它已经支持 Sass/Scss 文件

但是在 Sass/Scss 文件中使用默认的相对导入,我必须使用类似的代码 @import "../../../../../styles/variables/_variables.scss";

相反,我想使用绝对导入,所以我可以使用代码导入 @import "styles/variables/_variables.scss";

我知道实现的一种方法是更新选项

{
   loader: "sass-loader",
   options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
 }

但我想在不弹出的情况下做到这一点,我该怎么做?使用react-app-rewired?

4

1 回答 1

1

将所需的根包含路径添加到SASS_PATH环境变量。

可以在运行yarnornpm命令时设置,也可以在.env文件中设置。

例子

// my-component.jsx
import React from 'react';
import './my-component.scss';

class MyComponent extends React.Component {
  render() {
    return (<div className="container">Hello</div>);
  }
}
// my-component.scss
@import 'styles/abstracts/variables';

.container {}

假设styles/abstracts/_variables.scss存在下src,您可以执行以下操作:

SASS_PATH=src yarn start

或者

echo SASS_PATH=src > .env
yarn start
于 2020-05-04T15:02:07.773 回答