如何使用 node-sass 將 scss 編譯為 css

Question

我有一個 master.scss，其中包含許多來自 other.scss 文件的導入。 如果我更改 *.scss 文件，master.css 會自動生成。

我只使用 NPM，沒有 Gulp 或 Grunt。 這應該保持下去。

我當前的構建腳本：

"scripts": {
  "watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}

這很好，但需要很長時間才能編譯！

現在我正在嘗試使用node-sass 。 它應該編譯得非常快。 不幸的是，我不完全理解......通過npm install node-sass sass

我在哪里使用以下內容（來自文檔）？

var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

在package.json中不是這樣，對吧？

這是我讀過的教程： Using NPM as a Task Runner

劇本不錯。 我該如何使用它？

"scripts": {
  "sass": "node-sass sass/ -o build/css/"
}

這會將所有 sass 文件（不以下划線開頭）編譯到 build/css/ 目錄。

我希望得到你的幫助！

Answer 1

也許這涵蓋了您的問題： How to compile or convert sass / scss to css with node-sass (no Ruby)?

如果它適合您，我會推薦使用 grunt，它會讓事情變得更簡單、更快。 這個 grunt 插件可能是最好的選擇： https ://www.npmjs.com/package/grunt-contrib-sass

// 更新

我遵循了您發送的教程，它非常簡單。 您在根文件夾中創建一個名為“package.json”的文件，其中包含以下內容：

{
  "watches": {
    "sass": "sass/**"
  },
  "scripts": {
    "sass": "node-sass sass/ -o build/css/",
    "dev": "rerun-script"
  }
}

然后在根文件夾中打開命令行並運行以下命令：

npm install --save-dev node-sass

上面安裝了node-sass

然后運行：

npm install --save-dev rerun-script

上面創建了一個 watch 任務，這樣你就不必在每次進行更改時都重新運行 node-sass

最后你跑

npm run dev

完畢！

Answer 2

文檔。

如果你想自動編譯文件那么你需要把標志 -w

node-sass -w -r assets/src/scss/ -o assets/dist/css/

我的包.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

package.json 的實際版本： https ://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

Answer 3

node-sass中的watch模式不會運行第一次編譯。 它假定您已經運行了node-sass 。

就個人而言，我使用這樣的東西：

{
  "scripts": {
    "sass": "node-sass -o /path/to/dist /path/to/src",
    "sass:watch": "npm run sass && npm run sass -- --watch --recursive"
  }
}

你可以像這樣使用它： npm run sass:watch