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

Question

我正在使用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？

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，您可以执行以下操作：

// 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 {}