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 的处理规则了。