Webpack format css selectors in weird string

Question

I use webpack 3 for my build process.

webpack.config.js:

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })
},

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        use: [
            {
                loader: "css-loader",
                options: {
                    minimize: true,
                    modules: true,
                    importLoaders: 1
                }
            },
            {
                loader: "postcss-loader",
                options: {
                    path: './postcss.config.js'
                }
            },
            {
                loader: "sass-loader",
                options: {
                    includePaths: [dirAssets]
                }
            }
        ],

        fallback: "style-loader",
        publicPath: './'
    })
},

I require my main.scss in main.js and in dev and build env my selectors looks like this:

._1RIaajDV8RXjVfAFhmcSaz {}

It should looks like:

.h1 {}

Any Idea? I can't solve this problem.

modules: true is replacing all your classes with a localIdentName (hash:base64), set it to false or modify the generated local ident name, check my answer below... — btzr
– btzr, Commented Mar 18, 2018 at 0:29

btzr · Accepted Answer · 2018-03-18 05:49:38Z

3

Weird string

Webpack format css selectors in weird string

The weird string is actually a unique generated ident (hash:base64) for local scoped css.

If you don't need to use css-modules in your project, just remove or set modules: false to solve your problem.

Modules

The query parameter modules enables the CSS Modules spec. This enables local scoped CSS by default.

The loader replaces local selectors with unique identifiers.

:local(.className) { background: red; }
:local .className { color: green; }

The choosen unique identifiers are exported by the module.

._23_aKvs-b8bW2Vg3fwHozO { background: red; }
._23_aKvs-b8bW2Vg3fwHozO { color: green; }

Local ident name

You can configure the generated ident with the localIdentName query parameter (default [hash:base64])

{
     loader: 'css-loader',
     options: {
       modules: true,
       localIdentName: '[name]--[hash:base64:5]'
     }
}

Main.scss

.h1 {}

Exported css

.h1--_1RIaajDV8RXjVfAFhmcSaz {}

edited Mar 18, 2018 at 5:49

answered Mar 18, 2018 at 0:15

btzr

2,15421 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sascha Over a year ago

Works. Great explanation!

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

It's hard to know exactly as there are other factors that will play into this but I would suspect it's your minimizing tool.

Using "minimize : true" means that you want the css-loader to squash your css files down to as small of text as it can get. However, per the documentation sometimes this can be destructive to the css:

minimize

By default the css-loader minimizes the css if specified by the module system.

In some cases the minification is destructive to the css, so you can provide your own options to the cssnano-based minifier if needed. See cssnano's documentation for more information on the available options.

You can also disable or enforce minification with the minimize query parameter.

https://github.com/webpack-contrib/css-loader

Try turning off minification and/or introducing the cssnano as specified in the documentation.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 17, 2018 at 21:29

Gerik

7363 silver badges11 bronze badges

1 Comment

btzr Over a year ago

I agree but minimize: true isn't related to the problem, see: github.com/webpack-contrib/css-loader#modules

Collectives™ on Stack Overflow

Webpack format css selectors in weird string

2 Answers 2

Weird string

Modules

Local ident name

Main.scss

Exported css

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Weird string

Local ident name

Main.scss

Exported css

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related