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";

相反，我想使用絕對導入，因此我可以使用代碼@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 {}

假設src下存在styles/abstracts/_variables.scss ，您可以執行以下操作：

SASS_PATH=src yarn start

或者

echo SASS_PATH=src > .env
yarn start