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

网友投稿 844 2022-05-30

Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (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 文件中这样来使用:

1

2

3

下面主要讲解一下vue中使用less或者sass的方法,以less为例(style.less)

主要是两种

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

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

1

2

3

4

5

6

7

8

9

10

1

2.对于外部less文件:

一是在main.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' },

1

2

3

4

1

注:

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

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

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

1

2

3

4

5

这段是针对.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') }

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

拓展阅读

vue-cli3文档

《Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus》

CSS Less Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:XML DOM 获取节点值
下一篇:uni-app的多环境部署配置
相关文章