如何在Nest.js中将SCSS文件编译为CSS格式

Nest CLI的assets配置仅负责复制文件，不会处理SCSS编译，所以需要额外工具实现格式转换。以下是两种可行方案：

方案一：使用sass命令行工具配合构建脚本 #

1. 安装sass编译工具

npm install sass --save-dev
# 或用yarn
yarn add sass -D

2. 修改package.json的脚本命令，将SCSS编译和Nest构建结合

{
  "scripts": {
    "build:scss": "sass ./assets/**/*.scss ./dist/assets/",
    "build": "npm run build:scss && nest build",
    "start:dev": "concurrently \"npm run build:scss && nest start --watch\" \"sass --watch ./assets/**/*.scss ./dist/assets/\""
  }
}

注：concurrently用于并行运行Nest的watch和SCSS的监听，需要提前安装：npm install concurrently --save-dev

3. 调整nest-cli.json的assets配置，避免重复复制SCSS文件

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "./assets/**/*",
        "exclude": "./assets/**/*.scss",
        "outDir": "./dist/assets/",
        "watchAssets": true
      }
    ]
  }
}

方案二：自定义Webpack配置集成编译流程 #

1. 安装所需的webpack loader和插件

npm install css-loader sass-loader style-loader mini-css-extract-plugin --save-dev

2. 项目根目录创建webpack.config.js文件，添加SCSS编译规则

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'assets'),
        use: [
          MiniCssExtractPlugin.loader, // 将CSS提取为单独文件
          'css-loader', // 解析CSS
          'sass-loader' // 编译SCSS为CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css' // 输出的CSS文件路径
    })
  ]
};

3. 修改nest-cli.json，启用自定义webpack配置

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "webpack": true,
    "webpackConfigPath": "./webpack.config.js",
    "assets": [
      {
        "include": "./assets/**/*",
        "exclude": "./assets/**/*.scss",
        "outDir": "./dist/assets/",
        "watchAssets": true
      }
    ]
  }
}

4. 运行nest build或nest start --watch，Webpack会自动将SCSS编译为CSS输出到dist/assets目录

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