如何将scss编译为带有节点sass的css

我有一个master.scss，其中许多从其他.scss文件导入。如果我更改* .scss文件，master.css会自动生成。如何将scss编译为带有节点sass的css

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

我现在的构建脚本：

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

这很好，但需要较长时间来编译！

现在我正在尝试使用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文件（不以下划线开始）来构建/ CSS /目录。

我希望对您有所帮助！

来源

2016-01-20 user3852555

也许这包括你的问题： How to compile or convert sass/scss to css with node-sass (no Ruby)?

如果是你，我会建议使用咕噜一种选择，它会使事情变得更简单，更快捷。这咕噜插件可能是最好的选择：https://www.npmjs.com/package/grunt-contrib-sass

// UPDATE

我跟着你发送的教程，这是非常简单的。你创建你的根文件夹一个文件名为“的package.json”包含以下内容：

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

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

npm install --save-dev node-sass

以上将安装节点萨斯

然后运行：

npm install --save-dev rerun-script

的ABOV Ë因此您不必重新运行节点萨斯创建一个手表任务每次你改变

和最后的运行

npm run dev

完成！

来源

2016-01-20 10:44:29

我想尝试一下，而不是一口吞下/咕噜声。最后，它也没有，请参阅教程链接。我只是不知道如何正确使用“node-sass”。 – user3852555

在我的答案downvoting之前，你可以看看我发送的第一个链接。您正在寻找的答案是：http://stackoverflow.com/a/31448585/4265499 –

对不起，错误...不，答案不存在。目标是将运行作为任务进行编译。 – user3852555

Documentation.

如果你想自动编译文件，那么你需要把该标志-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-28 18:34:01 artamonovdev

您的答案是迄今为止获得自定义scss的最简单的“krufty”方法，该方法针对需要BS4和品牌覆盖的项目进行设置和运行。我所有的其他研究都导致了前端开发者的敌对复杂配置。 – Roralee

如何将scss编译为带有节点sass的css

回答

相关问题