Global SCSS variables

[YuraKolesnikov]

❓Question

Guys, could you please help me to prepend global scss with razzle 4.1.0

package.json

{
  "name": "my-razzle-app",
  "version": "4.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "sass-loader": "7.3.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.1.0",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "^4.1.0",
    "razzle-dev-utils": "^4.1.0",
    "razzle-plugin-scss": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}

razzle.config.js

const path = require('path');

module.exports = {
    plugins: [
        {
            name: 'scss',
            options: {
                sass: {
                    dev: {
                        data: `@import "${path.resolve(__dirname, './src/styles/propertySets.scss')}";`,
                    },
                    prod: {
                        data: `@import "${path.resolve(__dirname, './src/styles/propertySets.scss')}";`,
                    },
                },
            },
        },
    ],
}

When I start dev-server, I get this error:

Module build failed (from ./node_modules/razzle-plugin-scss/node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

[fivethreeo]

https://github.com/jaredpalmer/razzle/blob/master/examples/with-scss-options/razzle.config.js

[YuraKolesnikov]

Thank you very much, it works! But I've encountered the next problem, which was on old project, which led me to the Razzle - multiple imports. I can't understand why React can't handle css modules like Vue and optimize them. It seems like every import of component to component causes another import of propertySets.scss which can potentially lead to hundreds of imports, devtools are lagging and it's impossible to work. Problem is only in dev.

[fivethreeo]

Try setting staticCssInDev

https://razzlejs.org/docs/customization

[YuraKolesnikov]

Nope, the problem is still there

[fivethreeo]

Using additionalData?

[YuraKolesnikov]

Yup!