How to insert SASS/SCSS loader

System Information
  • Strapi Version: 3.5
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

If you wish to use SASS/SCSS file you can follow my git :

How to :

  1. generate plugin
    strapi generate:plugin testSCSS

Add custom Webpack Config



Install webpack Sass:

npm install sass-loader@10.1.1 sass@1.32.8 --save-dev

Important! :

sass-loader latest version is 11.0.1 but very important to install version 10 because strapi use webpack 4 and it incompatible with webpack 4 (current ver is 5)

You can see installed webpack version:
npm list webpack

Insert Webpack Sass loader configuration:

Insert file as provided in this git :

Check Sass

source file:

insert new item to Tests collection and see result

Hi @Gayrat ! I’ve followed your git, in local environment all is ok but on Heroku it keeps giving me this error:

  > strapi build
remote:        Building your admin UI with production configuration ...
remote: Error: Cannot find module '../node_modules/sass-loader'
remote: Require stack:
remote: - /tmp/build_984728b3/admin/admin.config.js
remote: - /tmp/build_984728b3/node_modules/strapi-admin/index.js
remote: - /tmp/build_984728b3/node_modules/strapi/lib/commands/build.js
remote: - /tmp/build_984728b3/node_modules/strapi/bin/strapi.js
remote:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
remote:     at Function.resolve (internal/modules/cjs/helpers.js:99:19)
remote:     at Object.<anonymous> (/tmp/build_984728b3/admin/admin.config.js:6:30)
remote:     at Module._compile (internal/modules/cjs/loader.js:1085:14)
remote:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
remote:     at Module.load (internal/modules/cjs/loader.js:950:32)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
remote:     at Module.require (internal/modules/cjs/loader.js:974:19)
remote:     at require (internal/modules/cjs/helpers.js:93:18)
remote:     at getCustomWebpackConfig (/tmp/build_984728b3/node_modules/strapi-admin/index.js:22:25)
remote:     at (/tmp/build_984728b3/node_modules/strapi-admin/index.js:46:18) {
remote:   code: 'MODULE_NOT_FOUND',
remote:   requireStack: [
remote:     '/tmp/build_984728b3/admin/admin.config.js',
remote:     '/tmp/build_984728b3/node_modules/strapi-admin/index.js',
remote:     '/tmp/build_984728b3/node_modules/strapi/lib/commands/build.js',
remote:     '/tmp/build_984728b3/node_modules/strapi/bin/strapi.js'
remote:   ]
remote: }
remote: -----> Build failed

This is my admin.config.js:

const path = require("path");

module.exports = {
  webpack: (config, webpack) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

    // Allow scss modules
    config.resolve = {
      extensions: [...config.resolve.extensions, ".scss"],

    // Configure a SASS loader
      test: /\.s[ac]ss$/i,
      use: [
          loader: "sass-loader",

    return config;

EDIT: using Node 12.x it works both locally and remotely, with Node 14.x it keeps giving this error remotely…

1 Like