如何配置NX Monorepo使其支持CSS与SCSS样式？是否有命令可用？

一键配置（推荐） #

NX提供框架专属的生成器命令，可自动完成SCSS支持配置，同时保留原有CSS文件的兼容性：

• React项目：
  执行以下命令：

  nx generate @nrwl/react:setup-style --style scss
  

• Angular项目：
  执行以下命令：

  nx generate @nrwl/angular:setup-style --style scss
  

• Vue项目：
  执行以下命令：

  nx generate @nrwl/vue:setup-style --style scss
  

手动配置（通用方案） #

如果一键命令不适用，可按以下步骤手动配置：

1. 安装SCSS依赖
   首先安装sass预处理器：

   # npm
   npm install sass --save-dev
   
   # yarn
   yarn add sass --dev
   
   # pnpm
   pnpm add sass -D
   

2. 调整Webpack构建规则
   打开项目根目录的project.json，或者自定义的webpack.config.js文件，添加SCSS文件的处理规则：

   • 若使用自定义Webpack配置，在module.rules中添加：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.scss$/,
             use: ['style-loader', 'css-loader', 'sass-loader'],
             exclude: /node_modules/,
           },
         ],
       },
     };
     

   • 若使用NX预设Webpack配置，在project.json的targets.build.options中添加预处理器配置（以React为例）：

     {
       "targets": {
         "build": {
           "options": {
             "stylePreprocessorOptions": {
               "includePaths": ["libs/ui/src/styles"] // 根据项目结构调整路径
             }
           }
         }
       }
     }
     

3. 验证配置
   创建一个.scss文件并导入到组件中，运行nx build <你的项目名>或nx serve <你的项目名>，确认样式能正常编译生效即可。

配置完成后，原有CSS文件可继续正常使用，NX会自动区分处理.css和.scss文件。

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