Question

我正在使用已creacte-react-app 2.0.0-next.66cc7a90

但是在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？

Answer 1

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

可以在运行yarn或npm命令时或在.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

OR

echo SASS_PATH=src > .env
yarn start

create-react-app 2.0，如何在sass / scss文件中使用绝对路径导入？

1 个答案:

示例