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

墨蓝 2022-12-17 10:55 252阅读 0赞

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

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

# 问题描述 #

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

`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_vuejs_vue-cli_issues_441]

[https://github.com/ustbhuangyi/vue-sell/issues/53][https_github.com_ustbhuangyi_vue-sell_issues_53]

[https://cloud.tencent.com/developer/article/1472386][https_cloud.tencent.com_developer_article_1472386]

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

前端学习交流群，想进来面基的，可以加群：  
![Vue学习交流][Vue] ![React学习交流][Vue]  
或者手动search群号：685486827，832485817；

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

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]

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

[https_github.com_vuejs_vue-cli_issues_441]: https://github.com/vuejs/vue-cli/issues/441
[https_github.com_ustbhuangyi_vue-sell_issues_53]: https://github.com/ustbhuangyi/vue-sell/issues/53
[https_cloud.tencent.com_developer_article_1472386]: https://cloud.tencent.com/developer/article/1472386
[Vue]: 
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu