Phoenix 1.4.11 how to use webpack with sass?

[wolfiton]

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

[wolfiton]

So found this after searching with google for pheonix 1.4 sass

Hopefully it will fix my problem

@Gazler

Adding sass/scss to a Phoenix 1.4 project involves the following:

1. Adding node-sass and sass-loader to assets/package.json
2. Renaming assets/css/app.css to assets/css/app.scss
3. Adding the sass-loader to the css file section in webpack.config.js and changing the extension to .scss
4. changing import css from "../css/app.css" to import css from "../css/app.scss" in assets/js/app.js

Here’s a diff of the altered files:

package.json:

     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^0.28.10",
     "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
+    "sass-loader": "^7.0.1",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "webpack": "4.4.0",
     "webpack-cli": "^2.0.10"

webpack.config.js:

       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
       }
     ]
   },

assets/js/app.js

 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import css from "../css/app.css"
+import css from "../css/app.scss"

Live reloading works for this setup.

[wolfiton]

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)

[kokolegorille]

@wolfiton

/assets/vendors/bulma/bulma.sass

sass != scss

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

[wolfiton]

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/?

[kokolegorille]

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

You might try

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

[wolfiton]

@kokolegorille

test: /.(sass|scss)$/

Thanks i will try this and come back with the results

[wolfiton]

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)

[wolfiton]

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

possible to import SASS file in SCSS?

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

[wolfiton]

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)

[wolfiton]

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

[tme_317]

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!

[wolfiton]

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

[wolfiton]

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

[Kurisu]

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.

[wolfiton]

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

[Kurisu]

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?

[wolfiton]

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

[adamjarling]

Here’s our webpack config for Sass using Phoenix v1.5.4 if it helps:

...

module: {
  rules: [
    {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: {} },
          { loader: "sass-loader", options: {} },
        ],
      },
  ]
}

...

package.json includes node-sass and sass-loader packages in devDependencies

Then in /assets/styles/app.scss (entry file), we import all Sass files here:

@charset "utf-8";

// Custom variables go before importing Bulma
@import "~@nulib/admin-react-components/dist/public/styles/variables";
@import "~@nulib/admin-react-components/dist/public/styles/fonts";

@import "~bulma/bulma";
...
@import "./scss/mixins";
@import "./scss/base";
@import "./scss/reactivesearch";
@import "./scss/skeleton";
@import "./scss/hover";