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

目录
  • vue cli3配置stylus全局变量
  • vue cli3使用stylus全局变量

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变量的路径
    });
}

保存文件，下载依赖即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3中如何实现定义全局变量

    目录 vue3定义全局变量 vue3全局变量app.config.globalProperties的使用 globalProperties vue3定义全局变量 在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量. 但是在vue3中,这种方法显然不行了.因为vue3中在setup里面我们是无法获取到this的,因此按照官方文档我们使用下面方法来定义全局变量: 首先在main.js里写一个我们要定义的全局变

  • 在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理.你也可以手动安装相应的 webpack loader: # Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 然后你就可以导入相应的文件类型,或在

  • vue-cli配置全局sass、less变量的方法

    一.全局配置less 1.下载插件 **vue add style-resources-loader** vue add pluginName 是vue-cli3提供的.vue add 是用yarn安装插件的, yarn源的问题有可能导致失败.如果上面安装失败的话,就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader(前提是已经安装过 less less-loader) // 没有出错的话,可以无视这里 npm

  • 在vue-cli 3中给stylus、sass样式传入共享的全局变量

    在vue-cli 3中, 给stylus.sass样式传入共享的全局变量 在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦.全局引入是个不错的方法,于是,在main.js 中引入variable.styl文件,但是你会发现,并不起作用. 在查阅了vue cli官方文档后发现,有官方支持的方法. 1.给sass样式传入共享的全局变量 有的时候你想要向 webpack 的预处理器 loader 传递选项.你可以使用 vue.conf

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • vue cli3配置image-webpack-loader方式

    vue cli3配置image-webpack-loader方式

    目录 vue cli3配置image-webpack-loader 使用image-webpack-loader压缩图片报错 vue cli3配置image-webpack-loader vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => {     config.plugins.delete('

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • 详解Vue CLI3配置解析之css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules

  • 详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

    执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值,比如: page1.f151b4d3.js 那如果不要 hash 呢,你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的,静态资源直接就 inject 进去的,所以,当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false. filenameHashing: false 我们看看

  • Vue文件配置全局变量的实例

    在vue文件里配置所需的全局变量,然后通过export暴露出去. 如 Global.vue <script type="text/javascript"> const serverPath="http://127.0.0.1:8080"; export default{ serverPath } </script> 在main.js引入,将global接口放到prototype,这样以后其他组件引用global里的全局变量就可以直接通过&qu

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue中接口域名配置为全局变量的实现方法

    src中新建 一个 domain.js文件 // 配置全局接口域名 const domain = 'http://bowensi.xiaoniren.cn/'; export default { testUrl:domain } main.js中 import domain from './domain.js'; global.domain = domain; 组件中: data () { return { imgsrc:domain.testUrl}} 以上这篇vue中接口域名配置为全局变量的

随机推荐