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

2023-11-12 17:51:04

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)
}