如何使用node-sass将scss编译为CSS [英] How to compile scss to css with node-sass

问题描述

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

I have a master.scss with many imports from other .scss files. If I change a * .scss file master.css is generated automatically.

我只使用NPM，没有Gulp或Grunt！

I use only the NPM, no Gulp or Grunt! This should remain so.

我当前的构建脚本：

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

那很好，但是编译需要很长时间！

That's nice but takes a long time to compile!

现在我正在尝试使用 node-sass 。它应该编译非常快。
不幸的是，我不完全理解...
node-sass 是通过 npm install node-sass

Now I'm trying to use node-sass. It should compile very fast. Unfortunately, I do not understand it completely ... node-sass is installed, via npm install node-sass

我在哪里使用以下文档（来自文档）？

Where do I use the following (from docs)?

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 ，对吧？

这是一个教程，我已经读过：使用NPM作为任务运行器

Here's a tutorial, what I've read: Using NPM as a Task Runner

脚本很好。我怎么使用它？

The script is good. How can I use it?

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

这将编译所有的sass文件（不要以下划线开头）到build / css /目录。

我希望得到您的帮助！

推荐答案

也许这涵盖了您的问题：
如何通过node-sass（无Ruby）将sass / scss编译或转换为CSS？ a>

Maybe this covers your question: How to compile or convert sass / scss to css with node-sass (no Ruby)?

如果这是您的选择，我建议您使用grunt，它将使事情变得更加简单和快捷。这个grunt插件可能是最好的选择： https://www.npmjs.com/package/ grunt-contrib-sass

If it's an option for you I would recommend using grunt, it will make things a lot simpler and faster. This grunt plugin is probably the best option: https://www.npmjs.com/package/grunt-contrib-sass

// UPDATE

// UPDATE

我遵循了您发送的教程，非常简单。
您将在根文件夹中创建一个名为 package.json的文件，其中包含以下内容：

I followed the tutorial you sent and it's very straightforward. You create a file in your root folder called "package.json" containing the following:

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

然后在根文件夹中打开命令行并运行以下命令：

You then open the command line in the root folder and run the following:

npm install --save-dev node-sass

上面安装了node-sass

The above installs node-sass

然后运行：

npm install --save-dev rerun-script

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

The above creates a watch task so you don't have to rerun node-sass everytime you make changes

最后一次运行

npm run dev

完成！

这篇关于如何使用node-sass将scss编译为CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！