使用react + webpack时如何使用绝对路径导入自定义scss？

Question

在scss文件中,我正在尝试导入自定义的,广泛使用的scss块(在React/SASS/Webpack堆栈中).

这样我就可以使用共享mixin了.

假设我正在创建一个MyAdminButton,我想导入涉及项目所有按钮的scss文件.(这是自定义scss,而不是供应商/外部scss).

它看起来像这样:

//this actually works but it is a code smell : what if the current file moves ?
@import "../../stylesheets/_common-btn-styles.scss";

.my-admin-btn {
    // here I can use a shared mixin defined in _common-btn-styles.scss
}

这听起来不太好,因为如果我的scss文件移动,那么一切都会被打破.

谢谢你的帮助

Answer 1

发现.实际上你可以在webpack.config.json中配置sass-loader,如下所述:https://github.com/jtangelder/sass-loader

以下是相关部分:

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}

Answer 2

如果您使用允许绝对导入的Create React App v3，您可以使用波浪号

@import "~theme/colors";