Webpack - Phoenix 1.4
24 Jan 2019SCSS
$ cd assets
$ npm install --save-dev node-sass sass-loader
$ mv assets/css/app.css assets/css/app.scss
// assets/js/app.js
- import css from "../css/app.css"
+ import css from "../css/app.scss"
// assets/webpack.config.js
module.exports = (env, options) => ({
module: {
rules: [
- {
- test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader']
- }
+ {
+ test: /\.(css|scss)$/,
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+ }
]
}
});
npm packages
IMO there is no need to import minimized versions (*.min.css) in
assets/css/app.scss - CSS files will be minimized by Webpack with
optimize-css-assets-webpack-plugin
.
milligram
$ cd assets
$ npm install milligram
// assets/css/app.scss
@import '~milligram/dist/milligram.css';
toastr
$ cd assets
$ npm install toastr
// assets/js/app.js
import Toastr from "toastr";
Toastr.success("Hello World!");
// assets/css/app.scss
@import '~toastr/build/toastr.css';