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

Question

我在一个 React 元素中工作。
在组件的特定 SASS 文件中，我像这样导入 SASS 部分:

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

当我在 Angular 元素中工作时，以前的路径可以简化为:

@import 'fonts';

实现这一点的方法是向“.angular.cli.json”添加配置，如链接 https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components 中所述。 .

我的问题是:有没有办法在 React 元素中实现相同的结果？如何？

谢谢!

Answer 1

您可以使用 Webpack 别名(假设您使用的是 webpack)来解析导入，然后使用 scss 文件中的别名来导入模块，如下所示:

webpack.config.js

const path = require('path');

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

并像导入

@import '~styles/variables';

有关更多信息，请参阅这些

https://webpack.js.org/configuration/resolve/

https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

希望这可以帮助 !