1

I need to prefix the Bulma css classes by using webpack. I found an example but my app uses Vue CLI 3 and I'm not sure how to translate the webpack config to a vue.config.js.

This is the webpack config

In my vue.config.js I have the following:

  chainWebpack: config => {
    config.module
      .rule('css-prefixer')
      .use(['style-loader', 'css-loader'])
      .loader('postcss-loader')
      .tap(options => {
        // Prefixer goes here
        return options
      })
  }

Which gives some internal webpack errors.

Christiaan Maks
  • 3,248
  • 3
  • 23
  • 27
  • bulma doesn't need any special configuration in `vue-cli` to work correctly. npm install the module, import it in your own `.scss` file, import that `.scss` file in your `main.js` and you're done – Ohgodwhy Mar 01 '19 at 16:36
  • Yes I know but I want to prefix all CSS classes that bulma has. Because it uses very generic names such as `.label` which causes problems when I dynamically load my app into an existing website. – Christiaan Maks Mar 01 '19 at 16:48
  • Did you manage to figure it out? Having the same issue as my client's site is using Bootstrap 3.4 and we need to integrate bulma in newer sections. – intosite Apr 01 '19 at 03:00
  • I ended up taking the code in the link and generating the prefixed Bulma css with that. Then I just added those to my assets in my Vue project. So Bulma doesn't come from node_modules as I would like but it's good enough. – Christiaan Maks Apr 02 '19 at 07:45

1 Answers1

3

Just manage to do it in my vue.config.js

const path = require('path')
const prefixer = require('postcss-prefixer')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          prefixer({
            prefix: 'b-'
          })
        ]
      }
    }
  }
}
intosite
  • 145
  • 2
  • 11
  • This doesn't work well. It prefixes all the css classes with `b-` : – intosite Apr 01 '19 at 03:41
  • Very nice, I have tried this example with "const prefixer = require('postcss-prefix-selector');" and works well. It adds the prefix before all css selectors. – darpet May 02 '19 at 13:20
  • Nice. I just used the technique suggested by @darpet using `postcss-prefix-selector` to scope an entire CSS library to one `
    ` on the page     – camslice Mar 03 '20 at 14:59
  • It prefixes everything everything in css file, – itsoft3g Aug 01 '22 at 08:39