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

18 comments

/phoenix #webpack

0 5720 18

2020-09-11 17:58:12 UTC

Showing Posts 1 to 10

Show Best Posts
Show All Posts (oldest first)
Show All Posts (newest first)

wolfiton

So found this after searching with google for pheonix 1.4 sass

Hopefully it will fix my problem

Phoenix 1.4, Webpack 4 and Bulma, Bootstrap 4 SASS

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

Adding node-sass and sass-loader to assets/package.json

Renaming assets/css/app.css to assets/css/app.scss

Adding the sass-loader to the css file section in webpack.config.js and changing the extension to .scss

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.

Post #1

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)

Post #2

kokolegorille

sass != scss

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

Post #3

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

Post #4

kokolegorille

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

You might try

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

Post #5

wolfiton

Thanks i will try this and come back with the results

Post #6

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)

Post #7

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

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

Post #8

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)

Post #9