Daily Learnings

19/May/2023

While using mini-css-extract-plugin with vuejs and webpack 5, I was getting problem related to CSS priority. Scoped Css/Scss was not getting higher priority than common css. To resolve this issue we had to use oneof rule. In resourceQuery we need to add /scoped/ . Then add loaders that we want to execute for scoped css. Here instead of using MiniCssLoader, use style-loader . This will inject scoped css as a style tag which has higher priority then <link rel='stylesheet'/> . Eg

 {
        test: /\.(sa|sc|c)ss$/,
        oneOf: [
          {
            resourceQuery: /scoped/,  // foo.css?scoped
            use: [
               //Inject scoped SCSS into component's style tag
              'style-loader',
              'css-loader',
              'sass-loader',
              'postcss-loader'
            ]
          },
          {
            use: [
              // Extract CSS into separate files
              MiniCssExtractPlugin.loader, 
             'css-loader',
             'sass-loader',
             'postcss-loader'
            ]
          }
        ]
      }