Vue 进阶（幺柒柒）：Vue 应用 Sass、Scss、Less 和 Stylus

关注

发布于: 10 小时前

Vue进阶（幺柒柒）：Vue 应用 Sass、Scss、Less 和 Stylus

一、前言

Vue项目中应用预处理器，可以有效减少css代码量，推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。

如果当时没有选择，内置的 webpack 仍然会被预配置为可以完成所有的处理，也可以手动安装相应的 webpack loader：

# Sassnpm install -D sass-loader node-sass
# Lessnpm install -D less-loader less
# Stylusnpm 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 functionat 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

复制代码

五、拓展阅读

发布于: 10 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/18cef57ed739a62ec2333ea76】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺柒柒）：Vue 应用 Sass、Scss、Less 和 Stylus

一、前言

二、写在 vue 中的 less

三、对于外 less 文件

四、注

五、拓展阅读

No Silver Bullet

评论