Vue中全局引入stylus文件不生效的问题

Vue中使用stylus全局引入不生效的问题

问题描述

比如说,
一、我们在 App.vue 里面:

<style lang="stylus">
@import "./style/main.styl"
</style>

main.styl 里面定义了两个变量,我们想象的是,在所有的 .vue 文件中都可以使用 main.styl 中的变量。

但现实的情况是:并没有生效

二、还有一种情况是:在 main.jsimport "@/style/main.styl";我们期望的结果是:项目中的每个 .vue 文件 style 里面可以直接使用 main.styl 里面定义的变量。

但现实的情况是:并没有生效

难受啊≧ ﹏ ≦

那么、如何配置 stylus 的全局变量使用方式

解决方案一

定义一个 css 变量文件:variable.styl,在你想要使用 css 变量的文件中,引入它。 【简单、易用】

但是如果使用频率很高的话,你可能不喜欢这种方式。

解决方案二

vue-cli2 的模版中:

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

vue-cli3 及以上版本的脚手架模版中:

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

解决方案三

借助于配置文件 build/utils.js 解决该问题

// 在generateLoaders方法的后面!后面!后面!(说三遍呀!)定义如下变量
const stylusOptions = {
  import: [
    path.join(__dirname, "../src/styls/main.styl")
  ]
}

// 在紧接着的return返回值中进行配置
return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus', stylusOptions),
  styl: generateLoaders('stylus', stylusOptions)
}

参考

https://github.com/vuejs/vue-cli/issues/441

https://github.com/ustbhuangyi/vue-sell/issues/53

https://cloud.tencent.com/developer/article/1472386

-----------------(正文完)------------------

前端学习交流群,想进来面基的,可以加群:
Vue学习交流 React学习交流
或者手动search群号:685486827832485817


写在最后: 约定优于配置 —— 软件开发的简约原则
-------------------------------- (完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页