Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus

举报
SHQ5785 发表于 2021/03/16 01:03:48 2021/03/16
【摘要】 Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。 如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: # Sass npm install -D sass-load...

Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用SassScssLess预处理器。可以在创建项目的时候选择预处理器 (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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

然后就可以导入相应的文件类型,或在 .vue 文件中这样来使用:

<style lang="scss"> $color: red;
</style>

  
 
  • 1
  • 2
  • 3

下面主要讲解一下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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
<link href="/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">

  
 
  • 1

2.对于外部less文件:

一是在main.jsimport style.less

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

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

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

  
 
  • 1
  • 2
  • 3
  • 4
<script type="text/javascript" src="/static/js/style.c67fefaf3f60c5ca074a.js"></script>

  
 
  • 1

注:

vue2.xwebpack.base.conf.js

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

这段是针对.vue文件的处理规则,其中vueLoaderConfigvue-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')
 }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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

如碰到下面错误

Module build failed: TypeError: this.getResolve is not a function
at Object.loader (F:\code\myGit\vue\node_modules\sass-loader\dist\index.js:52:26)

  
 
  • 1
  • 2

sass-loader版本过高,webpack编译失败,解决方法:

修改sass-loader 版本(^8.0.0 => ^7.3.1)

npm install sass-loader@7.3.1 --save

  
 
  • 1

拓展阅读

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/114239396

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。