如何使用 node-sass 将 scss 编译为 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34896279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to compile scss to css with node-sass
提问by QJan84
I have a master.scss with many imports from other .scss files. If I change a * .scss file master.css is generated automatically.
我有一个 master.scss，其中有许多来自其他 .scss 文件的导入。如果我更改 * .scss 文件 master.css 会自动生成。
I use only the NPM, no Gulp or Grunt! This should remain so.
我只使用 NPM，不使用 Gulp 或 Grunt！这应该保持如此。
My current build script:
我当前的构建脚本：
"scripts": {
"watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}
That's nice but takes a long time to compile!
这很好，但是编译需要很长时间！
Now I'm trying to use node-sass. It should compile very fast.
Unfortunately, I do not understand it completely ...
node-sassis installed, via npm install node-sass
现在我正在尝试使用node-sass。它应该编译得非常快。不幸的是，我完全不明白……
安装了node-sass，通过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..]
});
This is not so in the package.json, right?
不是这样的package.json吧？
Here's a tutorial, what I've read: Using NPM as a Task Runner
这是我读过的教程： Using NPM as a Task Runner
The script is good. How can I use it?
剧本很好。我怎样才能使用它？
"scripts": {
"sass": "node-sass sass/ -o build/css/"
}
This will compile all of the sass files (that don't start with an underscore) to the build/css/ directory.
这会将所有 sass 文件（不以下划线开头）编译到 build/css/ 目录。
I hope for your help!
我希望得到你的帮助！
采纳答案by Vasilis Tsirimokos
Maybe this covers your question: How to compile or convert sass / scss to css with node-sass (no Ruby)?
也许这涵盖了您的问题： How to compile or convert sass / scss to css with node-sass (no Ruby)？
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
如果这是你的一个选择，我会推荐使用 grunt，它会让事情变得更简单和更快。这个 grunt 插件可能是最好的选择：https: //www.npmjs.com/package/grunt-contrib-sass
// UPDATE
// 更新
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:
我按照您发送的教程进行操作，非常简单。您在根文件夹中创建一个名为“package.json”的文件，其中包含以下内容：
{
"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
The above installs node-sass
以上安装了node-sass
You then run:
然后你运行：
npm install --save-dev rerun-script
The above creates a watch task so you don't have to rerun node-sass everytime you make changes
以上创建了一个监视任务，因此您不必每次进行更改时都重新运行 node-sass
And last you run
最后你跑
npm run dev
Done!
完毕！
回答by artamonovdev
If you want automatically compile files then you need to put the flag -w
如果你想自动编译文件，那么你需要把标志 -w
node-sass -w -r assets/src/scss/ -o assets/dist/css/
My package.json
我的 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"
]
}
}
Actual version of package.json: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d
package.json 的实际版本：https: //gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d
回答by la3roug
The watchmode in node-sassdoesn't run the first compilation. It supposes that you have already run node-sass.
该watch模式在node-sass不运行在第一次编译。它假设您已经运行了node-sass.
Personnaly I use something like this:
我个人使用这样的东西：
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
And you can use it like this: npm run sass:watch
你可以像这样使用它： npm run sass:watch
