A default installation of Phoenix with Sass enabled.
Clone the repo to your local machine and install it.
$ git clone https://github.com/brandedux/phoenix_sass.git
$ cd phoenix_sass
$ mix deps.get
$ mix deps.compile
$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
$ cd ..
$ mix phx.server
Create a new Phoenix app named "phoenix_sass".
$ mix phx.new phoenix_sass
We are almost there! The following steps are missing:
$ cd phoenix_sass
Then configure your database in config/dev.exs and run:
$ mix ecto.create
Start your Phoenix app with:
$ mix phx.server
You can also run your app inside IEx (Interactive Elixir) as:
$ iex -S mix phx.server
$ mix deps.get
$ mix deps.compile
$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
$ cd ..
$ mix phx.server
Modify webpack.config.js to accept .css or .scss extension and add sass-loader
to dependencies.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
$ cd assets
$ npm install --save-dev node-sass sass-loader
import css from "../css/app.scss"
At this point you can import scss files to the app.scss file.
Ready to run in production? Please check the phoenix deployment guides.
- Official website: http://www.phoenixframework.org/
- Guides: https://hexdocs.pm/phoenix/overview.html
- Docs: https://hexdocs.pm/phoenix
- Mailing list: http://groups.google.com/group/phoenix-talk
- Source: https://github.com/phoenixframework/phoenix