React 导入样式文件的快捷方式

【问题标题】：React shortcut to importing style filesReact 导入样式文件的快捷方式
【发布时间】：2020-09-18 02:43:51
【问题描述】：

我正在从事一个 React 项目。
在组件的特定 SASS 文件中，我像这样导入 SASS 部分：

@import '../../styles/fonts';

当我在 Angular 项目中工作时，之前的路径可以简化为：

@import 'fonts';

如何实现这一点是通过在此链接https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components 中描述的向“.angular.cli.json”添加配置。

我的问题是：有没有办法在 React 项目中实现相同的结果？如何？

谢谢！

【问题讨论】：

【解决方案1】：

您可以使用 Webpack 别名（假设您正在使用 webpack）来解析导入，然后使用 scss 文件中的别名来导入模块，如下所示：

webpack.config.js

const path = require('path');

module.exports = {
  //...
 resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
 }
};

并像导入一样

@import '~styles/variables';

更多信息请参考这些

希望这会有所帮助！

【讨论】：