vue项目中使用less或者sass的方法

Posted 西西夏天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中使用less或者sass的方法相关的知识,希望对你有一定的参考价值。

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

前段时间一直在学习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的方法的主要内容,如果未能解决你的问题,请参考以下文章

vuecli4配置sass与less

vue-cli3使用sass全局变量(less同理)

vue-cli3使用sass全局变量(less同理)

淘宝适配方案px2rem在Vue+Sass和React+Less中的使用

淘宝适配方案px2rem在Vue+Sass和React+Less中的使用

Vue项目代码规范