如何將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

回答

相關問題