关于 stylus的全局变量的配置

如何在vue项目当中在每个组件中都能使用stylus定义的变量(比如基准值)

主要是在build/utils的配置文件的cssLoaders函数中

const stylusOptions = {
    import:[
      path.join(__dirname, "../src/common/variables.styl")
    ],
    paths:[
      path.join(__dirname, "../src/common/"),
      path.join(__dirname, "../")
    ]
  }
  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus', stylusOptions),
    styl: generateLoaders('stylus', stylusOptions)
  }

OK配置完成

效果:

width (490/$rem)
height (120/$rem)
position absolute
top (785/$rem)
left 50%
margin-left (-245/$rem)
background-color #efca7d

猜你喜欢

转载自www.cnblogs.com/bozhiyao/p/9099065.html
今日推荐