7

我有一个 master.scss，其中包含许多从其他 .scss 文件中导入的内容。如果我更改 * .scss 文件 master.css 会自动生成。

我只使用 NPM，没有 Gulp 或 Grunt！这应该保持不变。

我当前的构建脚本：

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

这很好，但需要很长时间才能编译！

现在我正在尝试使用node-sass。它应该编译得非常快。不幸的是，我不完全理解... node-sass已安装，通过npm install node-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/ 目录。

我希望能得到你的帮助！

4

3 回答 3

8

也许这涵盖了您的问题： 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

以上创建了一个监视任务，因此您不必每次进行更改时都重新运行 node-sass

最后你跑

npm run dev

完毕！

于 2016-01-20T10:44:29.213 回答
5

文档。

如果你想自动编译文件，那么你需要把标志 -w

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

我的 package.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

于 2017-02-28T18:34:01.757 回答
5

中的watch模式node-sass不运行第一次编译。它假设你已经跑了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

于 2018-04-17T12:35:52.113 回答