Vue-cli: stylus global import not work!

Created on 20 Apr 2017  Â·  7Comments  Â·  Source: vuejs/vue-cli

i use stylus ,

min.styl
$main-color = #000000
App.vue
  @import "../assets/min.styl"
Holle.vue
  .button
      $main-color

holle.vue can't find $main-color
what can i do

Most helpful comment

I just wanted to leave a note to say @sky790312 's comment above helped me figure this out.

My vue.config.js which works

// vue.config.js
var path = require('path');
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.resolve(__dirname, "src/stylus/variables")]
      }
    }
  }
};

All 7 comments

Please ask questions on the forum or StackOverflow.


I think you have to import the stylus file in the style section

@posva I don't want to do in every vue file,Is any other way to do

Not that I know. You should search about how to do it in plain stylus
files, but it's not related to Vue

On Fri, 21 Apr 2017, 05:48 BusyHe, notifications@github.com wrote:

@posva https://github.com/posva I don't want to do in every vue file,Is
any other way to do

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/441#issuecomment-296046156, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAoicZyb8cvuiHMFd13j3vlHFb6-WGC1ks5ryCcZgaJpZM4NCluU
.

but it is related to the vue-cli. Importing fonts doesn't work either.

In cli2 webpack's setting like following:

plugins: [
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
import: [path.resolve(__dirname, '../src/stylus/variables.styl'), path.resolve(__dirname, '../src/stylus/extends.styl')]
}
}
})
]

In cli3 you can add file 'vue.config.js' and handle your webpack's setting like:

// vue.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
configureWebpack: {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
import: [path.resolve(__dirname, './src/stylus/variables.styl'), path.resolve(__dirname, './src/stylus/extends.styl')]
}
}
})
]
}
}

It works for me.

I just wanted to leave a note to say @sky790312 's comment above helped me figure this out.

My vue.config.js which works

// vue.config.js
var path = require('path');
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.resolve(__dirname, "src/stylus/variables")]
      }
    }
  }
};

How to import once

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

b-zee picture b-zee  Â·  3Comments

jgribonvald picture jgribonvald  Â·  3Comments

BusyHe picture BusyHe  Â·  3Comments

Akryum picture Akryum  Â·  3Comments

NathanKleekamp picture NathanKleekamp  Â·  3Comments