tap349

my blog

Webpack - Phoenix 1.4

24 Jan 2019

SCSS

$ 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';