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 的處理規則了。