Vue 应用 Sass、Scss、Less 和 Stylus
【摘要】 一、前言Vue项目中应用预处理器，可以有效减少css代码量， 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。如果当时没有选择，内置的 webpack 仍然会被预配置为可以完成所有的处理，也可以手动安装相应的 webpack loader：# Sassnpm install -D sass-loader node-sa...
一、前言
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
然后，就可以导入相应的文件类型，或在 .vue 文件中这样来使用：
<style lang="scss">
$color: red;
</style>
下面主要讲解一下vue中应用less或者sass的方法，以less为例(style.less)。
二、写在 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">
三、对于外部 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'
},
<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 的处理规则。
四、补充说明
如碰到下面错误
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)
因sass-loader版本过高，webpack编译失败，解决方法：
修改sass-loader 版本(^8.0.0 => ^7.3.1)
npm install sass-loader@7.3.1 --save
五、拓展阅读
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）