How to insert SASS/SCSS loader

Questions and Answers Strapi Admin
1
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

Documentation:

Ref:

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 :
admin/admin.config.js

Check Sass

source file:
plugins/test-scss/admin/src/components/boolView/index.js

insert new item to Tests collection and see result

2

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:        
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 Object.build (/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: 
remote: -----> Build failed
remote:

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 = {
      ...config.resolve,
      extensions: [...config.resolve.extensions, ".scss"],
    };

    // Configure a SASS loader
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      use: [
        "style-loader",
        "css-loader",
        "sass-loader",
        {
          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