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

Question

I am using creacte-react-app 2.0.0-next.66cc7a90 , which already has support for Sass/Scss files

however with default relative import in Sass/Scss files, i have to use code like @import "../../../../../styles/variables/_variables.scss";

instead I want to use absolute import so i can import with code @import "styles/variables/_variables.scss";

I know one way to acheve so is to update options

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

but I want to do it without ejecting, how can i do it? using react-app-rewired?

Answer 1

Add the required root include paths to SASS_PATH environment variable.

It can be set either when you run the yarn or npm commands or in a .env file.

Example

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

Assuming styles/abstracts/_variables.scss exists under src , you could do the following:

SASS_PATH=src yarn start

OR

echo SASS_PATH=src > .env
yarn start