React/SCSS/GatsbyJS - Minimize all class names

user_19558940 0
Viewed 103

I'm using react-bootstrap in my GatsbyJS project in which I use SCSS for styling (a mix of bootstrap classes + some of my own). I want to minimize and obfuscate all the classNames in the production build of my site but I'm having issues achieving it.

I've tried a number of GatbsyJS plugins to achieve this but most seem to assume usage of CSS modules which I don't think I can do when using react-bootstrap (or other packages) since I can't control the approach to specifying classNames they use.

I've also explored just importing the minified CSS for react-bootstrap and using that directly, however that doesn't really help and won't work for my setup as I need the ability to override SCSS variables.

In the past I've utilised css-minimizer-webpack-plugin to achieve what I'm after, however I've tried customising the webpack config for GatsbyJS without any success.

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

exports.onCreateWebpackConfig = ({
    actions,
  }) => {
    actions.setWebpackConfig({
        optimization: {
            minimize: true,
            minimizer: [
                new CssMinimizerPlugin(),
            ],
        }
    })
  }

Any ideas on how I can continue using SCSS throughout my project but end up with minimized classNames in my production build would be much appreciated!

react-bootstrap twitter-bootstrap gatsby reactjs sass
1 Answers

I haven’t configured this particular plugin or needed to solve for the problem you are encountering with Sass, but perhaps this plugin will work for you after all if you configure it like this (which is what I do for other Webpack plugins in Gatsby):

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [new CssMinimizerPlugin()],
  })
}
user_2031300
Related