Phoenix 1.4.11 how to use webpack with sass?

Hi everyone,

I need a simple configuration to add to the already webpack plugins added by phoenix by default to manage my sass.

Here is the default config


const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
  ]
});

How can I make it to convert my sass from the vendor dir to go to the css dir?

Ex: /assets/vendors/bulma/bulma.sass => /assets/css/bulma/bulma.min.css ?

Thanks in advance

So found this after searching with google for pheonix 1.4 sass

Hopefully it will fix my problem

Update no go with the config in post2#

My current config that doesn’t work

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    "./js/app.js": glob.sync("./vendor/**/*.js").concat(["./js/app.js"])
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "../priv/static/js")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     config: {
          //       path: __dirname + "/postcss.config.js"
          //     }
          //   }
          // }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "../css/app.css" }),
    new CopyWebpackPlugin([{ from: "static/", to: "../" }])
  ]
});

Made a repo on github here with all my files maybe someone can help me because i can’t understand why it doesn’t work(confused)
Github Code

Error

ERROR in ./css/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (/home/dan/Codes/blog_api/assets/node_modules/sass-loader/dist/index.js:52:26)
    at /home/dan/Codes/blog_api/assets/node_modules/webpack/lib/NormalModule.js:244:20
    at /home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/dan/Codes/blog_api/assets/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/dan/Codes/blog_api/assets/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/dan/Codes/blog_api/assets/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
 @ ./js/app.js 4:0-34
 @ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 186 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
    
    ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss
    Module build failed: TypeError: this.getResolve is not a function
        at Object.loader (/home/dan/Codes/blog_api/assets/node_modules/sass-loader/dist/index.js:52:26)

sass != scss

so bulma.sass will not trigger scss rule in webpack.

1 Like

I am sorry but I can’t understand what you are trying to say.
Are you trying to tell me to change this

test: /\.scss$/

to this

test: /sass != scss/?

No, I just wanted to tell sass files are not going to trigger scss rule.

You might try

test: /\.(sass|scss)$/,
1 Like

Thanks i will try this and come back with the results

Also if you can help me with postcss to make it work I would really appreciate it.After the sass loader config works

Error again using test: /.(sass|scss)$/

ERROR in ./css/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (/home/dan/Codes/blog_api/assets/node_modules/sass-loader/dist/index.js:52:26)
    at /home/dan/Codes/blog_api/assets/node_modules/webpack/lib/NormalModule.js:244:20
    at /home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/dan/Codes/blog_api/assets/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/dan/Codes/blog_api/assets/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/dan/Codes/blog_api/assets/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/dan/Codes/blog_api/assets/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
 @ ./js/app.js 4:0-34
 @ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 186 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
    
    ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss
    Module build failed: TypeError: this.getResolve is not a function
        at Object.loader (/home/dan/Codes/blog_api/assets/node_modules/sass-loader/dist/index.js:52:26)

So changed to this test: /\.(s *)css$ /

But get this error

ERROR in ./css/app.scss
Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
| /* This file is for your main application css. */
| 
| @import "./bulma.sass";
| 
 @ ./js/app.js 4:0-34
 @ multi ./js/app.js

Can’t I import sass files in scss files?

Also thank you to everyone that helps me in advance with this config and errors

Update found this but doesn’t work for me

Also i have a loader for sass so why does a loader error pops up?

Works but with errors for bulma

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    "./js/app.js": glob.sync("./vendor/**/*.js").concat(["./js/app.js"])
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "../priv/static/js")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              config: {
                path: __dirname + "/postcss.config.js"
              }
            }
          },
          "fast-sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "../css/app.css" }),
    new CopyWebpackPlugin([{ from: "static/", to: "../" }])
  ]
});

Error

ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/fast-sass-loader/lib!./css/app.scss)
    Module build failed (from ./node_modules/fast-sass-loader/lib/index.js):
    Error: media query expression must begin with '('
        at options.error (/home/dan/Codes/blog_api/assets/node_modules/node-sass/lib/index.js:291:26)

Has someone experienced something similar with the problem i am having here?

I’m using Buefy which installs Bulma in your node_modules but the following (untested) config should also work for you assuming you have sass-loader and node-sass installed in your package.json:

// webpack.config.js
...
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
...
// app.js
import "../css/app.scss";
import "phoenix_html";
...
// app.scss
@import "~bulma/sass/utilities/_all";
// customizations go here... i.e. custom colors, etc
@import "~bulma/bulma";

I got this way of configuring it from these docs: https://buefy.org/documentation/customization

This method should work even if you are not using Vue / Buefy and just install Bulma the normal way.

Hope this helps!

1 Like

Thanks @tme_317, I will try it and come back with the results.

Update

This worked for me

// app.scss
@import “~bulma/sass/utilities/_all”;
// customizations go here… i.e. custom colors, etc
@import “~bulma”;

Also I still get an error about charset utf8 but it works so thanks everyone that helped with this

1 Like

Hi @wolfiton.
I’m just a bit curious. I didn’t read the full discussion but I would like to know if your issue is just about phoenix version >= 1.4.11.

I’m using 1.4.8 and it’s working fine with both scss and sass files. I can recall that I had some hard time to get webpack correctly set. So my concern is knowing wether I will have to configure again webpack when upgrading my projects to Phoenix 1.4.11 or plus.

Still have some problems i will load my code on github with the final version.

Also fast-css-loader will not work with postcss so I making some changes right now to my webpack config

Ok maybe it will help you if I share my config with you? But I mean did you use Phoenix version prior to 1.4.11? Or do you just start with this version?

I started with this version for learning purposes because my interest is grapqhl and nuxt and I managed to find a config that works but wnated to try with a new biulma component to see if it really works.

Give me a couple a minutes and i should be able to push everything to github for future references for everybody.

Also thanks for the offer of sharing the config you have but i am good for now.

Update the repo is here https://github.com/wolfiton/blog_api it uses yarn and you can use the following command yarn watch

1 Like