web-dev-qa-db-ja.com

sassファイルを単一のsassファイルにバンドルする

TL; DR：私の質問は私のsassファイルのいくつかを単一のsassファイルにバンドルする方法ですか？

私はAngularコンポーネントライブラリを開発していて、それをng-packagrでパッケージ化しました。それを@my-lib/ngx-componentsと呼びましょう。

私のlibのコンシューマーは、@my-lib/ngx-components/navbarのような私のコンポーネントをインポートします。

コンポーネントにテーマサポートを追加することにしました。

たとえば、デフォルトの色（背景、テキスト、ホバーなど）のナビゲーションバーコンポーネントがあります。ライブラリの利用者がこれらの色を独自のテーマで上書きできるようにしたいです。そのため、$theme入力を受け取りいくつかのcssルールを次のようにオーバーライドするmixinを作成しました（これは私が持っているものの基本バージョンです）

_navbar-theme.sass

@mixin navbar-theme($theme) 
    $primary-color: map-get($theme, primary-color)
    $secondary-color: map-get($theme, secondary-color)
    $color: map-get($theme, color)

    .navbar
         background-color: $primary-color
         color: $color
         &:hover
               background-color: $secondary-color

各コンポーネントには、独自の*-theme.sassファイルがあります。

次のようにこれらすべてをインポートするグローバル_theming.sassファイルもあります

_theming.sass

@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'

この_theming.sassファイルをライブラリからエクスポートしたいので、人々はこのファイルを自分のsassファイルに@import '~@my-lib/ngx-components/theming'としてインポートし、利用可能なすべてのmixinを使い始めることができます。 。カスタムのnavbar、buttonなどが必要な場合は、それらのmixinsを1回のインポートで使用できる必要があります。

角度のあるマテリアルのテーマ設定のように見せようとしました。

最初は、すでに依存関係にあるnode-sassを試しました。ただし、sassをcssにビルドしようとするため、出力ファイルでミックスインが省略されます。

次に、Angular-Materialが何をしたかを調べました。彼らは scss-bundle を使用します

「まさにこれが欲しい」と思いました。ただし、scssファイルではなく、sassファイルが必要です。 sassファイルを読み取ることはできません。

それで、「さて、sassをあきらめてscssを使い始めることができます。これらのファイルをすべて手動で処理せずにscssに変換するにはどうすればよいですか」と思いました。次に、 sass-convert を見つけました。 この質問では コマンドラインで使用できると言われました。ただし、npmを使用してsass-convertをグローバルにインストールすると、コマンドライン実行可能ファイルが表示されませんでした。使用するにはGulpが必要だと思います。

私は最初からGulpを使用することを避けてきました。これは、学習するための別のツールを意味し、コードベースを複雑にするためです。

この時点で、私は "Hal固定電球" のように感じます

TL; DR：私の質問は私のsassファイルのいくつかを単一のsassファイルにバンドルする方法ですか？

また、webpackを必要とするソリューションを思い付くことができれば、それも問題ありません。

cssangularwebpacksassgulp
9
Bunyamin Coskuner

あなたの意見や質問を見てみましょう：

この_theming.sassファイルを自分のlibからエクスポートしたいので、人々はこのファイルを自分のsassファイルに@ import'〜 @ my-lib/ngx-components/theming 'としてインポートし、利用可能なすべてのミックスインの使用を開始できます。カスタムナビゲーションバー、ボタンなどが必要な場合は、それらのミックスインを1回のインポートで使用できる必要があります。

あなたは、あなたのターゲットオーディエンスが何であるかを知る必要があります。ほとんどの場合、テンプレートスクラッチのようにアプリを作成するためにangular cliを使用します。

したがって、cssバンドル（人々はあなたのcssをインポートしたいだけです）とsassバンドル（あなたのオブジェクトまたはあなたのミックスインを使いたい人）を提供する必要があります。

この_theming.sassファイルをライブラリからエクスポートしたいので、人々はこのファイルを自分のsassファイルに@ import'〜 @ my-lib/ngx-components/theming 'としてインポートし、利用可能なすべてのミックスインの使用を開始できます。カスタムナビゲーションバー、ボタンなどが必要な場合は、それらのミックスインを1回のインポートで使用できる必要があります。

角度のあるマテリアルのテーマ設定のように見せようとしました。

まず、@angular/materialはsassをエクスポートしない（scssを使用する）が、scss-bundleによってコンパイルされたcsstheneをエクスポートすることを知っておく必要があります（あなたが言うように） コード およびドキュメント テーマ 。

「まさにこれが欲しい」と思いました。ただし、sassファイルではなくscssファイルが必要です。 sassファイルを読み取ることはできません。

これを引用したい answer ：

Sassは、構文が進歩したCSSプリプロセッサです。高度な構文のスタイルシートはプログラムによって処理され、通常のCSSスタイルシートに変換されます。ただし、CSS標準自体を拡張するものではありません。

コードをsassからscssに（自分で）転送する必要がある方が良いです、それはそれほど多くはありません（私はいつもsassファイルの代わりにscssを書くと思います）。

解決：

1. cssとsassを提供します（scssの方が良い）

コンポーネントライブラリを提供するときは、cssとscssを提供する必要があります。 Beacuse angular cliはデフォルトでscssローダーを提供しません。

sassファイルを使用しないでください。scssファイルを使用してください。上の私の参照回答を参照してください。

scss-バンドル+ webpack

Cssを提供する必要があるため、scssをバンドルすることができます webpack Shell plugin 。 cliを使用したい場合は、Scssがcliを提供しています。

2.scssを構造化します

さて、この場合のbootstrap @ 4モジュールからサンプルを取りましょう。 Bootstrap次のような構造を使用します（ Documents ）：

scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss

index.scss内は次のようになります：

@import 'variables'
@import 'mixins'
@import 'functions'
...

したがって、このscssは、cssの横に配信する必要があります。 bootstrapと同様に、消費者はmixinを利用できます。また、コンシューマーがscssフォルダー内のscssファイルを見つける場合のこの優れたアプローチ（scssが挿入されているものを簡単に指定できます）。

更新

単一ファイルにバンドルするには、それを行うためのタスクランナーを作成する必要があります。 webpackを使用したい場合は、プラグインを作成して使用できます。

ここにプラグインの例があります：

scss-bundle-plugin.js

configwebpackを呼び出します。

plugins: [
   new webpack.NoEmitOnErrorsPlugin(),
   new SCSSBundlePlugin({
        file: path.join(__dirname, 'src/index.scss')
   })
],

遊び場を試すには、チェックアウト hello-world-loader then：

# install dependency
npm install
# try play ground
npm run webpack

_theme.scssにファイル./distを作成します。

私のアドバイスでは、webpackを使用せず、この単純なケースでは代わりにタスクランナー（gulpまたはgrunt）を使用してください。 Webpackは進歩しすぎて、タスクを書くのが難しい。

2
hendrathings

scss-bundle と呼ばれる広く使用されているパッケージもあります。

使い方はとても簡単です。関連するすべての設定を含む設定ファイルを作成してから、scss-bundleを実行するだけです。

たとえば、これは、entry.scssにインポートされたすべてのscssファイルを使用し、それをout.scssに移動します。 @import '~@angular/material/theming';のようなangularこの例のテーマを除いて、すべてのインポートが解決されます。

scss-bundle.config.json：

{
  "bundlerOptions": {
    "entryFile": "my-project/src/entry.scss",
    "outFile": "dist/out.scss",
    "rootDir": "my-project/src",
    "project": "../../",
    "ignoreImports": [
      "~@angular/.*"
    ],
    "logLevel": "debug"
  }
}
0
Akora

scss/sassファイルのソリューション小さなモジュールを使用しました bundle-scss

ファイル名マスクでファイルをバンドルします。したがって、./src/**/*.theme.scssのような正しいマスクを渡す必要があります。宛先ファイルと、場合によってはカスタムの並べ替え順序を指定します。

すべてのインポートで1つのエントリポイントファイルを作成する必要はありません。 bundle-scssは、すべてのインポートをマスク分析してすべてのファイルを取得し、このファイルも含めます

0
Vitalii