iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuecli3配置stylus全局变量的使用方式
  • 365
分享到

vuecli3配置stylus全局变量的使用方式

vuecli3配置使用stylus全局变量配置stylus全局变量 2022-11-13 13:11:22 365人浏览 泡泡鱼
摘要

目录Vue cli3配置stylus全局变量vue cli3使用stylus全局变量vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的CSS变量

vue cli3配置stylus全局变量

首先在common.styl文件中写一些常用的CSS变量,方便全局使用,避免重复代码。

预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了。但是事与愿违,根本不起作用。

网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人。

// vue.config.js
module.exports = {
  // 配置使用stylus全局变量
  chainwebpack: config => {
    const types = ["vue-modules", "vue", "nORMal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("stylus").oneOf(type))
    );
  }
}
 
// 定义函数addStyleResource
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/styles/common.styl")] //后面的路径改成你自己放公共stylus变量的路径
    });
}

Tips: 使用vue cli3创建的项目默认是没有vue.config.js文件的,需要自己在项目根目录创建。

vue cli3使用stylus全局变量

在vue.config.js中添加以下代码

const path = require('path')
module.exports = {
  // 配置使用stylus全局变量
  chainWEBpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("stylus").oneOf(type))
    );
  }
};
// ====定义函数addStyleResource===
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/css/var.styl")] //后面跟着的路径是你自己放公共stylus变量的路径
    });
}

保存文件,下载依赖即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vuecli3配置stylus全局变量的使用方式

本文链接: https://www.lsjlt.com/news/171451.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作