vue踩坑筆記 六.less的安裝與使用

下載依賴

npm install less less-loader --save

全局配置

修改build/webpack.base.conf.js文件

module: {
  rules: [
     {  
      test: /\.scss$/,
      loaders: ["style", "css", "sass","style-loader!css-loader!less-loader"]
    },

組件中使用

修改組件的style標籤爲

<style lang = "less" scoped>

完整示例

<!--  -->
<template>
  <div class='wrapper'>
    <i class="iconfont icon49"></i>
    <input type="text">
  </div>
</template>

<script>
   export default {
   components: {},
   data() {
       return {
       };
   },
   methods: {},
   created() {},
   mounted() {},
}
</script>
<style lang = "less" scoped>
.wrapper{
  display: flex;
  justify-content: spacec;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 10px;
  i{
    color: red;
  } 
}
</style>

在全局使用less變量

1 安裝依賴

npm install sass-resources-loader --save-dev

2 定義一個less文件存放全局變量

3 修改build/utils.js文件

此處添加一個lessResourceLoader函數
代碼如下

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname,'../src/assets/styles/common.less' )你定義的放置全局變量的less文件的路徑
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改return語句中的less項

less: lessResourceLoader('less'),

3 在任意一個組件內使用