Phoenix Frameworkを使用しているときにスタイルシートにsass/scssを使用する方法はありますか?そして、もしあるなら、どうやって?
フェニックスフレームワークは、アセットパイプラインに ブランチ を使用します。
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 を参照してください。
以下は、私がコミットとして実行した手順を示すデモリポジトリです。
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
ファイルはシームレスに機能します。
グーグルが私をここに連れて行って、@ emailleninの答えが機能しなかった(私はデフォルトのフェニックス1.0.4を使用している)ので、私は何か他のものを見つける必要がありました。
トリックはすることです
npm install --save sass-brunch@^1.9.2
どうやら、sass-brunch
2.0以降で問題が発生し、フェニックスに同梱されているbrunch
のバージョンでは動作しなくなりました。
お役に立てば幸いです。
ここでいくつかの回答はbrunch-config.js
を変更することを提案し、他の回答はpackage.json
を変更することを提案します。 Phoenix 1.3の互換性の問題が解決されたため、npm install
とbrunch
の両方を使用することが可能です。
sass
をbrunch-config
plugins
セクションに追加します。
// brunch-config.js
plugins: {
sass: {
mode: "native" // This is the important part!
}
}
sass
をpackage.json
devDependencies
セクションに追加します。
// package.json
{
"devDependencies": {
"sass-brunch": "2.10.4" // check latest version on sass-brunch page
}
}
その後
cd assets
npm install
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
node-sass
とsass-loader
をインストールします{test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]}
app.css
の名前をapp.scss
に変更します(他のcssファイル、たとえば@import './phoenix.css';
を@import './phoenix.scss';
にインポートステートメントを含めます)。app.js
のインポートをimport css from "../css/app.scss"
に更新します