vue-cli4使用全局less文件中的变量配置操作

目录结构如下:

需求:

在Navgation.vue中使用global.less中的变量

vue-cli3的配置方法如下:传送门

vue-cli4的配置方法如下:

安装 style-resources-loader

npm i style-resources-loader -D

在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下:

// vue.config.js
const path = require('path')

module.exports = {
 lintOnSave: false,
 chainWebpack: config => {
 const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
 types.forEach(type => addStyleResource(config.module.rule('less这里写你的样样式类型').oneOf(type)))
 },
}

function addStyleResource (rule) {
 rule.use('style-resource')
 .loader('style-resources-loader')
 .options({
  patterns: [
  path.resolve(__dirname, './src/assets/css/global.less这里写你的全局样式地址'),
  ],
 })
}

补充知识:vue项目中配置LESS全局变量注入

在日常项目中,很多人都用到了css预处理器 ,如sass,less, stylus,处理样式非常方便,尤其是嵌套,变量,函数等,让我们书写css非常nice,在项目中一般会建立一个样式文件夹(此处用less),存放公共样式和公共变量如项目主体色,字体大小等等的变量,但是在项目中使用这些变量的时候通常都要在style标签内用@import '***/***/***/***.less';这样的方式来导入公共变量,页面一多,每个页面一般都需要引入就会感到很繁琐,所以此处就用到webpack的一些配置来达到全局注入,单个文件不需要单独引入的目的。

此处说下自己用的之前的脚手架版本的配置

在build文件夹下的webpack.base.conf.js文件中修改,主要借助了sass-resources-loader。

配置的时候还需要在问价头部引入path,const path = require('path')

然后在module模块下进行配置

module: {
  resolve: {
  extensions: ['.ts', '.js', '.vue', '.json'],
  // 顺带说下 此处可以配置路径别名,以后引入文件就不需要../../../这样了,直接@/就可以了,代表src下的路径,当然可设置多个,可自行配制
  alias: {
   '@': utils.resolve('src')
  }
  },
  ///
 rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   // /-------------
  {
   test: /\.less$/,
   use: [{
    loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader'
   }, {
    loader: 'css-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }, {
    loader: 'less-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }
   //此处开始------/
   {
    loader: 'sass-resources-loader',
    options: {
    resources: [
     path.resolve(__dirname, '此处写自己配置的公共变量文件路径,比如../src/themes/publicStyle/common.less')
    ]
    }
    //此处结束-------/
   }]
  },

然后说下自己查资料研究的cli3下的全局变量注入

cli3 与之前的cli不一样了,build和config文件没有了 ,所有的配置都需要在自己新建的vue.config.js文件里进行配置,具体配置官方文档和各种资料都很详细,在这就不详述了,在这就说下自己练手的一些配置,仅供参考,主要看全局变量注入那块,主要用的是style-resources-loader ,npm i style-resources-loader -D

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = {
 publicPath: "./",
 outputDir: "dist",
 assetsDir: "assets",
 indexPath: "index.html",
 filenameHashing: true,
 pages: undefined,
 lintOnSave: true,
 runtimeCompiler: false,
 transpileDependencies: [],
 productionSourceMap: false,
 crossorigin: undefined,
 integrity: false,
 devServer: {
 proxy: {
  "/api": {
  target: "************",
  changeOrigin: true,
  pathRewrite: { "^/api": "" }
  }
 }
 },
 // ------------------此处开始,以下是全局变量注入的配置--------------
 chainWebpack: config => {
 config.resolve.alias.set("@assets", resolve("src/assets"))
 // 这里只写了两个个,你可以自己再加,按这种格式.set("", resolve(""))
 const types = ["vue-modules", "vue", "normal-modules", "normal"]
 types.forEach(type =>
  addStyleResource(config.module.rule("less").oneOf(type))
 );
 },
 css: {
 loaderOptions: {
  less: {
  javascriptEnabled: true
  }
 }
 }
};
function addStyleResource(rule) {
 rule
 .use("style-resource")
 .loader("style-resources-loader")
 .options({
  patterns: [
  path.resolve(__dirname, "src/styles/index.less") // 需要全局导入的less
  ]
 })
}

大家一起加油! 如有不对之处,请大家不吝赐教。

之后看到另一个后台管理系统的配置,发现另一种配法 (cli3)

安装less less-loader style-resources-loader

npm install -D less-loader less
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

安装完后,在vue.config.js中配置

const path = require('path');
module.exports = {
 pluginOptions: {
  'style-resources-loader': {
   preProcessor: 'less',
   patterns: [
    // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
    path.resolve(__dirname, './src/style/params.less')
   ]
  }
 },
 ……
 其他配置
 ……
}

安装的时候也可以方法二:直接使用vue add style-resources-loader安装,vue add pluginName 是vue-cli3提供的。

vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。

如果安装失败的话,就上面分别安装的方法来

以上这篇vue-cli4使用全局less文件中的变量配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue项目使用.env文件配置全局环境变量的方法

    关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加

  • 在vue 中使用 less的教程详解

    1.安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader 先在index.html页面head标签内插入这段代码 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange'

  • Vue CLI4 Vue.config.js标准配置(最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression

  • Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

    当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的. 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量. 此时,只用import在main.js中导入variables.less文件是会报错的. 解决办法: 1.安装less和less-loader npm i less less-loader -D 2.要想全局使用还需使用一个插件( sass-resources-l

  • vue-cli4使用全局less文件中的变量配置操作

    目录结构如下: 需求: 在Navgation.vue中使用global.less中的变量 vue-cli3的配置方法如下:传送门 vue-cli4的配置方法如下: 安装 style-resources-loader npm i style-resources-loader -D 在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下: // vue.config.js const path = require('path') module.exports = { l

  • vue-cli打包后本地运行dist文件中的index.html操作

    使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文件, 直接打开index.html会直接报错 可以尝试用express搭建一个服务器,做法如下: 1.在dist根目录下新建server.js文件: 2.代码如下: var express = require('express'); var app = express(); const hostname = 'localhost'; const port = 3000; app.use(express.static

  • 查看TensorFlow checkpoint文件中的变量名和对应值方法

    实例如下所示: from tensorflow.python import pywrap_tensorflow checkpoint_path = os.path.join(model_dir, "model.ckpt") reader = pywrap_tensorflow.NewCheckpointReader(checkpoint_path) var_to_shape_map = reader.get_variable_to_shape_map() for key in var_

  • vue之组件内监控$store中定义变量的变化详解

    // 1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, // 2.通过watch来检查定义计算属性获取到的值的变化 watch:{ listenstage: function(ov,nv){ console.log('watch start--'); if(this.$store.state.iShaveMsg){ //业务处理 } } console.log('wa

  • 打印tensorflow恢复模型中所有变量与操作节点方式

    我就废话不多说了,大家还是直接看代码吧! #参数恢复 self.sess=tf.Session() saver = tf.train.import_meta_graph(os.path.join(model_fullpath,'model.ckpt-7.meta')) module_file = tf.train.latest_checkpoint(model_fullpath) saver.restore(self.sess, module_file) variable_names = [v.

  • 在web.config和app.config文件中增加自定义配置节点的方法

    有经验的开发人员都知道在开发.NET应用时可以利用配置文件保存一些常用并且有可能变化的信息,例如日志文件的保存路径.数据库连接信息等等,这样即使生产环境中的参数信息与开发环境不一致也只需要更改配置文件而不用改动源代码再重新编译,极其方便.并且我们一般还约定,在<appSettings>节点保存应用程序的配置信息,在<connectionStrings>中保存数据库连接字符串信息. 上面的这些方法和约定足以让我们在大部分开发中获得方便,但是在有些情况下有些配置信息可以按组分类存放,如

  • 基于Maven pom文件中属性变量总结

    目录 Maven pom文件属性变量总结 1.内置属性 2.POM属性 3.自定义属性 Maven pom变量定义 定义变量并赋值 Maven pom文件属性变量总结 1.内置属性 ${basedir}表示当前项目根目录 ${version}表示当前项目版本 2.POM属性 ${project.artifactId} 等价于元素的值 个人理解,本质上每个标签底层是通过对象的引用实现,也同样存在继承特性(仅仅是个人理解,供参考). 以此类推,可以发现很多这一类的属性定义. 类似地 ${projec

  • Maven之pom.xml文件中的Build配置解析

    目录 前言 正文 mave的相关插件 pom.xml中的build标签 1. pom.xml中的两种build 2. Profile Build和Project Build的共有元素 3. Project Build特有的<-Directory> 4. Project Build特有的 Maven常用配置 pom.xml基础配置 插件配置 编译插件 测试插件 测试报告插件 eclipse插件 war包插件 tomcat插件 插件命令 总结 前言 在日常的开发中,我们经常使用maven来管理和构

  • Linux中环境变量配置的步骤详解

    简介 我们大家在平时使用Linux的时候,经常需要配置一些环境变量,这时候一般都是网上随便搜搜就有人介绍经验的.不过问题在于他们的方法各不相同,有人说配置在/etc/profile里,有人说配置在/etc/environment,有人说配置在~/.bash_profile里,有人说配置在~/.bashrc里,有人说配置在~/.bash_login里,还有人说配置在~/.profile里...这真是公说公有理...那么问题来了,Linux到底是怎么读取配置文件的呢,依据又是什么呢?下面这篇文章就来

随机推荐