Create React App / Craco : how to implement "localIdentName" option for changing classnames?

user_7398559 0
Viewed 70

How to change classnames pattern using "localidentname" in create-react-app / @craco, as described here: https://webpack.js.org/loaders/css-loader/#localidentname I use dart-sass for styles.

package.json

{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@craco/craco": "^6.4.3",
       ...
        "react": "^18.1.0",
       ...
        "react-scripts": "5.0.1",
     
    },
    "scripts": {
        "start": "craco start",
        "dev": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "craco eject",
        "lint": "eslint ./",
        "lint-fix": "eslint ./",
        "stylelint": "stylelint \"**/*.scss\""
    },
  ....
    "devDependencies": {
        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
        ...
        "sass": "^1.54.2",
      ...
    }
}

craco.config.js


module.exports = {
   'style': {
        'sass': {
            'loaderOptions': {
                'implementation': require('sass'),
                'sassOptions': {
                    'localIdentName': '[path][name]__[local]-test-[hash:base64:5]',
                }
            }
        },
    },
}
craco create-react-app webpack reactjs
1 Answers

After debugging craco lib/features/webpack/style/css.js I have found solution:

module.exports = {
    'style': {
        'modules': {
            'localIdentName': '[path][name]__[local]-testtest-[hash:base64:5]'
        },
        'css': {
            'modules': {}
        },
    }
}
user_73985590
Related