質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

1782閲覧

【node-sass】node-sassで複数ディレクトリのscssファイルを一括でトランスパイルしたい(npm script)

eeengineeeeeeer

総合スコア15

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2020/04/24 12:17

編集2020/04/24 12:22

下記のようなディレクトリ構成の際に、node-sassを使って、child01〜child03のscssファイルをそれぞれのディレクトリのcssに一括でトランスパイルする方法を教えていただきたいです。

root/  ├ child01/  │ ├ index.html  │ └ assets/  │   ├ css/  │ │ └ style.css  │ └ scss/  │ └ style.scss  │  ├ child02/  │ ├ index.html  │ └ assets/  │   ├ css/  │ │ └ style.css  │ └ scss/  │ └ style.scss  │  ├ child03/  │ ├ index.html  │ └ assets/  │   ├ css/  │ │ └ style.css  │ └ scss/  │ └ style.scss  │  ├ node_modules  └ package.json

このような記述でできると思ったのですが、できませんでした。

json

1 "scripts": { 2 "sass": "node-sass --include-path scss ./**/assets/scss/style.scss ./**/assets/css/style.css", 3 },

サブディレクトリが増えた際にpackage.jsonを毎回書き換えるのは手間なので、サブディレクトリが増えても一括でトランスパイルを行いたいです。

各サブディレクトリにpackage.jsonを置いたり、gulp等のタスクランナーを利用せずに、このディレクトリ構成のままnpm scriptで実行したいです。

もし方法がわかるという方がいましたらご教授願います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

node-sass において出力先を glob 記法で指定することは出来ません。そのため、現状では npm scripts を用いて質問文に書かれているような動作は実現出来ません。今回の場合、以下のいずれかの方法を採用することになると思います。

  1. Gulp, webpack などを使用する。
  2. 各ディレクトリに対応するコマンドを作成する。
  3. ディレクトリ構造を現状の node-sass で記述可能な構造に変更する。
  4. コンパイル後にファイルを移動させる。

投稿2020/04/29 10:40

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問