半年木有更新博客了。。。

前段时间一直在学习vue,开始记录一下遇到的问题吧

这篇文章主要是总结一下vue中使用less或者sass的方法,以less为例(style.less)

主要是两种

1.对于写在vue文件中的less:

所有vue文件的<style lang="less"></style>,会被vue-loader处理编译到一个css文件中,最终自动通过link标签写入index.html(在vue-loader.conf.js中配置)

<style scoped lang="less">
.notFoundPage {
background-color: #0a8acd;
color: #fff;
position: relative;
h1 {
font-weight: 500;
}
}
</style>

 

<link href="/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">

  

2.对于外部less文件:

 一是在mian.js中import style.less

此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件,并在index.html的link中自动引入

 二是在webpack的入口文件entry中加上style.less,编译完的出口文件会被自动注入到index.html文件中

  entry: {
app: './src/main.js',
style: './src/style/style.less'
},

 

<script type="text/javascript" src="/static/js/style.c67fefaf3f60c5ca074a.js"></script>

  

 注意:

在vue2.x的webpack.base.conf.js:

{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},

  这段是针对.vue文件的处理规则,其中vueLoaderConfig是vue-cli自己定义的加载器,专门处理css样式

vueLoaderConfig引用的utils.js:

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

  所以不需要再在rules里写.css .less 的处理规则了。

vue项目中使用less或者sass的方法的更多相关文章

  1. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

  2. 如何在Vue项目中优雅的使用sass

    开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...

  3. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  4. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  5. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  6. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  7. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

随机推荐

  1. CDNI - RFC7336翻译

    CDNI框架 摘要 本文档提出了CDNI的一个框架.框架的目的是提供对CDNI问题空间的总体描述,和描述CDN互连所需的各种组件之间的 关系.CDNI需要指定接口和机制解决诸如请求路由,分发交换元数据 ...

  2. dotnet core调试docker下生成的dump文件

    最近公司预生产环境.net core应用的docker容器经常出现内存暴涨现象,有时会突然吃掉几个G,触发监控预警,造成容器重启. 分析了各种可能原因,修复了可能发生的内存泄露,经测试本地正常,但是发 ...

  3. [STM32F103]定时器PWM输入

    typedef struct { uint16_t TIM_OCMode;  //PWM模式1或者模式2 uint16_t TIM_OutputState; //输出使能 OR失能 uint16_t ...

  4. Python基础之字符串拼接简单介绍

    字符串拼接: %s表示可以传任意类型的值,%d表示只能传数字 test = "my name is %s,age %d" %("xyp",19) print(t ...

  5. spring入门 依赖入注的三种方式(1)

    第一种:构造器参数注入 第二种:setter方法属性注入(setter方法的规范-JavaBean规范) 第三种:接口注入 Bean 属性的注入:对一个对象的属性的赋值 1.构造器参数注入: publ ...

  6. 国内最全的Spring Boot系列之二

    历史文章 <国内最全的Spring Boot系列之一> 视频&交流平台 SpringBoot视频:http://t.cn/R3QepWG Spring Cloud视频:http:/ ...

  7. Mysql 5 忘记root密码,设置免密登陆

    1.修改my.cnf配置文件 vi /etc/my.cnf #允许免密认证登陆 skip-grant-tables = true 2.重启Mysql数据库并登陆数据库修改root用户密码 system ...

  8. python大法好——python json

    Python JSON 本章节我们将为大家介绍如何使用 Python 语言来编码和解码 JSON 对象. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式, ...

  9. 17Linux_mariadb_PXE+Kickstart

    Mariadb mariadb-client mariadb-server # yum groupinstall mariadb mariadb-client mariadb-server -y # ...

  10. android studio 模拟器无法联网的解决方法

    本人环境 win10 64位+ android studio  自带的模拟器 1.首先把模拟器打开,然后需要把SDK文件夹下的platform-tools添加到系统变量中(此目录一定要不要弄错). 2 ...