web-dev-qa-db-ja.com

node-sassを使用してscssをcssにコンパイルする方法

他の.scssファイルから多くのインポートを含むmaster.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ではそうではありませんよね？

これが私が読んだチュートリアルです： タスクランナーとしてのNPMの使用

スクリプトは良いです。どうすれば使用できますか？

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

これにより、すべてのsassファイル（アンダースコアで始まらない）がbuild/css /ディレクトリにコンパイルされます。

私はあなたの助けを願っています！

cssnode.jssassnpmnode-sass
7
QJan84

多分これはあなたの質問をカバーしています： sass/scssをnode-sass（Rubyなし）でcssにコンパイルまたは変換する方法は？

それがあなたのためのオプションであるならば、私はうなり声を使うことを勧めます、それは物事をずっと簡単にそしてより速くするでしょう。この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

完了！

7
Vasilis Tsirimokos

ドキュメント。

ファイルを自動的にコンパイルしたい場合は、フラグ-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

4
artamonovdev

node-sassのwatchモードは、最初のコンパイルを実行しません。すでに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

2
la3roug