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

Question

我正在使用creacte-react-app 2.0.0-next.66cc7a90 ，已经有 support for Sass/Scss files

但是，使用 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

或者

echo SASS_PATH=src > .env
yarn start