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

• 问题描述
• 解决方案一
• 解决方案二
• 解决方案三
• • 参考

问题描述

比如说，
一、我们在 App.vue 里面：

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

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

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

二、还有一种情况是：在 main.js 中 import "@/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

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

前端学习交流群，想进来面基的，可以加群：

或者手动search群号：685486827，832485817；

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

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

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

标签：generateLoaders,Vue,stylus,styl,vue,https,全局,main
来源： https://blog.csdn.net/csdn_yudong/article/details/109241863