CODEWITHSUNDEEP
javascriptvue.jswebpackvue-cli-3postcss-loader
Christiaan Maks
Christiaan Maks

Reputation: 3788

Webpack postcss prefixer in vue-cli 3

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.

Upvotes: 1

Views: 2807

Answers (1)

intosite
intosite

Reputation: 143

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-'
          })
        ]
      }
    }
  }
}

Upvotes: 3

Related Questions