React项目能否简化Sass导入路径？如何实现？

当然可以实现！在React项目里，我们完全可以像Angular那样配置全局的Sass导入路径，不用每次写冗长的../../这类相对路径。下面分几种常见的React项目场景，给你具体的实现方案：

1. Create React App（CRA）项目 #

CRA默认隐藏了Webpack配置，所以我们需要借助第三方工具来修改配置，最常用的是craco：

• 首先安装依赖：

  npm install @craco/craco --save-dev
  

• 在项目根目录创建craco.config.js文件，添加以下配置，把你的全局样式目录加入Sass的搜索路径：

  const path = require('path');
  
  module.exports = {
    style: {
      sass: {
        loaderOptions: {
          sassOptions: {
            // 这里替换成你存放fonts.scss的目录，比如src/styles
            includePaths: [path.resolve(__dirname, 'src/styles')],
          },
        },
      },
    },
  };
  

• 修改package.json里的启动脚本，用craco替换默认的react-scripts：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

配置完成后，你就可以在组件的Sass文件里直接写@import 'fonts';了！

2. 自定义Webpack配置的项目 #

如果你的项目是自己搭建的，或者已经 eject 过CRA，直接修改Webpack配置即可：

在Webpack配置文件的module.rules中，找到处理Sass的规则，添加includePaths：

const path = require('path');

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: [path.resolve(__dirname, 'src/styles')],
              },
            },
          },
        ],
      },
    ],
  },
};

另外，你也可以配置Webpack的路径别名，这样灵活性更高：

module.exports = {
  resolve: {
    alias: {
      // 给全局样式目录起别名
      '@styles': path.resolve(__dirname, 'src/styles'),
    },
  },
};

之后就可以用@import '@styles/fonts';来导入，同样很简洁。

3. Vite搭建的React项目 #

如果是用Vite创建的React项目，配置会更简单，修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  // 配置路径别名（可选）
  resolve: {
    alias: {
      '@styles': path.resolve(__dirname, 'src/styles'),
    },
  },
  // 配置Sass的全局搜索路径
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [path.resolve(__dirname, 'src/styles')],
      },
    },
  },
});

配置后，两种导入方式都支持：@import 'fonts'; 或者 @import '@styles/fonts';。

本质上，这些配置和Angular在.angular.cli.json里的设置逻辑是一样的——都是告诉预处理器去哪里找全局的样式文件，避免写繁琐的相对路径。

内容的提问来源于stack exchange，提问作者Antenaina