如何配置npm脚本将两个SCSS文件分别编译为对应CSS文件

Hey there! Let's tackle this SCSS compilation setup for your two files. Here are a couple of straightforward approaches you can take:

Option 1: Add Separate Scripts for Each File (Clear & Simple) #

If you prefer keeping things explicit (great for small numbers of files), you can add dedicated watch and compile scripts for your second SCSS file (I'll use theme.scss as an example—swap this with your actual filename):

Update the scripts section in your package.json like this:

"scripts": {
  // Existing single-file scripts
  "watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w",
  "compile:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.comp.css",
  // New scripts for your second file
  "watch:theme": "node-sass assets/stylesheets/theme.scss assets/stylesheets/theme.css -w",
  "compile:theme": "node-sass assets/stylesheets/theme.scss assets/stylesheets/theme.comp.css",
  // Optional: Combine scripts to handle both files at once
  // First install npm-run-all for cross-platform parallel execution: npm install npm-run-all --save-dev
  "watch:all": "npm-run-all --parallel watch:sass watch:theme",
  "compile:all": "npm-run-all compile:sass compile:theme"
}

• Run npm run watch:theme to only monitor your second file
• Use npm run watch:all to watch both files simultaneously
• Compile individual files with npm run compile:sass or npm run compile:theme, or compile both at once with npm run compile:all

Option 2: Single Script for Multiple Files (Concise & Scalable) #

If you want to keep your script list shorter, you can handle both files in one command by specifying multiple input-output pairs:

Compilation Script #

"compile:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.comp.css assets/stylesheets/theme.scss assets/stylesheets/theme.comp.css"

Watch Script #

Node-sass supports watching multiple files directly—just list all your target files and their outputs:

"watch:sass": "node-sass -w assets/stylesheets/custom.scss assets/stylesheets/custom.css assets/stylesheets/theme.scss assets/stylesheets/theme.css"

Note: If both files live in the same directory and you want to compile all SCSS files there, you can simplify further with directory-level watching (but this will compile every .scss file in the folder):

"watch:sass": "node-sass -w assets/stylesheets/ --output assets/stylesheets/"

Quick Tip #

If you need minified CSS output, add the --output-style compressed flag to your node-sass commands, like:

node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.min.css --output-style compressed

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