web-dev-qa-db-ja.com

フェニックスフレームワークでSASS / SCSSを使用する方法

Phoenix Frameworkを使用しているときにスタイルシートにsass/scssを使用する方法はありますか？そして、もしあるなら、どうやって？

phoenix-framework
23
NoDisplayName

フェニックスフレームワークは、アセットパイプラインに ブランチ を使用します。

docs から：

独自のアセットパイプラインを実装する代わりに、フェニックスは高速で開発者に優しいアセットビルドツールであるブランチを使用しています。フェニックスにはBrunchのデフォルト設定が付属しており、そのまま使用できますが、ニーズに合わせて曲げたり、CoffeeScript、TypeScript、LESSなどのさまざまなスクリプトやスタイル言語のサポートを追加したりするのは非常に簡単です。

SASSのサポートを追加するには、次のようにプロジェクトルートのpackage.jsonに「sass-brunch」を追加します。

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.1",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

次に、npm installを実行します。

フェニックスフレームワークは、デフォルトでブランチなしのアセット管理もサポートします。

新しいプロジェクトを作成している間：

phoenix.new --no-brunch my_projectをミックス

ブランチ構成なしでプロジェクトを作成します。ビルドされたアセットをpriv/static/にコピーできるシステムをセットアップし、ソースファイルを監視してすべての変更で自動コンパイルを行う必要があります。詳細は docs を参照してください。

21
Lenin Raj Rajasekaran

以下は、私がコミットとして実行した手順を示すデモリポジトリです。

https://github.com/sergiotapia/phoenix-sass-example

SASS/SCSSを使用するには、sass-brunchノードパッケージをインストールする必要があります。

npm install --save sass-brunch

次にbrunch-config.jsを編集して、プラグインセクションを次のようにします。

// Configure your plugins
plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  },
  sass: {
    mode: "native" // This is the important part!
  }
},

これを実行すると、.sassまたは.scssファイルはシームレスに機能します。

17
Sergio Tapia

グーグルが私をここに連れて行って、@ emailleninの答えが機能しなかった（私はデフォルトのフェニックス1.0.4を使用している）ので、私は何か他のものを見つける必要がありました。

トリックはすることです

npm install --save sass-brunch@^1.9.2

どうやら、sass-brunch 2.0以降で問題が発生し、フェニックスに同梱されているbrunchのバージョンでは動作しなくなりました。

お役に立てば幸いです。

6
Ivan Zarea

ここでいくつかの回答はbrunch-config.jsを変更することを提案し、他の回答はpackage.jsonを変更することを提案します。 Phoenix 1.3の互換性の問題が解決されたため、npm installとbrunchの両方を使用することが可能です。

sassをbrunch-configpluginsセクションに追加します。

// brunch-config.js
plugins: {
  sass: {
    mode: "native" // This is the important part!
  }
}

sassをpackage.jsondevDependenciesセクションに追加します。

// package.json
{
  "devDependencies": {
    "sass-brunch": "2.10.4" // check latest version on sass-brunch page
  }
}

その後

cd assets
npm install
5
denis.peplin

Phoenix 1.4でブランチがwebpackに置き換えられました。

私のために働いた指示：
https://elixirforum.com/t/phoenix-1-4-webpack-4-and-bulma-bootstrap-4-sass/14354/7
そして
https://andrewtimberlake.com/blog/2018/06/how-to-use-sass-scss-with-webpack-in-phoenix-1-4

  1. Npmプロジェクトにnode-sassとsass-loaderをインストールします
  2. Webpack設定のローダーを更新します：{test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]}
  3. app.cssの名前をapp.scssに変更します（他のcssファイル、たとえば@import './phoenix.css';を@import './phoenix.scss';にインポートステートメントを含めます）。
  4. app.jsのインポートをimport css from "../css/app.scss"に更新します
4
Nelu