CODEWITHSUNDEEP
vue.jswebpackpluginsnibstylus
Jimmy.D
Jimmy.D

Reputation: 99

Include a stylus plugin in Vue.js project

I can't include a stylus plugin in my project, the code varies so much from one version to another that I'm lost trying everything and anything.

Here are the versions I currently have:

"nib": "^1.1.2",

"vue": "^2.5.16",

"stylus": "^0.54.5",

"stylus-loader": "^3.0.2",

// vue.config.js

const nib = require('nib');

module.exports = {
    configureWebpack: {
        stylus: {
            use: [nib()],
            import: ['nib'],
        },
    },
};

Has anyone succeeded?

I would like to understand how to do it and why what I do doesn't work, thank you.

Upvotes: 1

Views: 4369

Answers (3)

Jimmy.D
Jimmy.D

Reputation: 99

Final solution:

In vue.config.js file

const path = require('path');

module.exports = {
    css: {
        loaderOptions: {
            stylus: {
                use: [
                    require('nib')(),
                ],
                import: [
                    path.resolve(__dirname, './src/styles/nibFixes.styl'),
                    '~nib/lib/nib/index.styl',
                ],
            },
        },
    },
};

In ./src/styles/nibFixes.styl file

// To fix https://github.com/stylus/nib/issues/312

flex-version = flex
support-for-ie = false
vendor-prefixes = official

Upvotes: 0

Lucas Vilaboim
Lucas Vilaboim

Reputation: 56

Once I installed rupture this way using vue-cli:

const rupture = require('rupture')

module.exports = {
  configureWebpack: {
    css: {
      loaderOptions: {
        stylus: {
          use: [rupture()]
        }
      }
    }
  }
}

I found the correct way to install nib:

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        use: [require('nib')()],
        import: ['~nib/lib/nib/index.styl']
      }
    }
  }
}

Upvotes: 1

ManUtopiK
ManUtopiK

Reputation: 4714

To use Stylus, you need to configure the css loader in your webpack config, add this to rules:

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader'
  ]
}

And install the style-loaders:
npm install --save-dev css-loader vue-style-loader

The css should then load and you have css processing in both our external assets and our single-file components.

One final change here to use stylus is to install the loader:
npm install --save-dev stylus stylus-loader

And add a rule:

{
  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

Upvotes: 0

Related Questions