vue.cli 中使用 less 來寫css樣式

vue-cli 的webpack中已配置了less，但 package.json 中沒有選項，為了方便開發中使用，需安裝一下：

安裝方式一：

npm install less less-loader --save-dev

安裝less和less-loader，並記錄到devDependencies中，因為這是我們在開發中使用的而非在生產中使用

安裝方式二：

或直接在 package.json 的 devDependencies 中

    "less": "^3.0.1",
    "less-loader": "^4.1.0",

然后 cnpm i 安裝一下

使用：

<style scoped lang="less">
.hello{
  .test{
    border:1px solid red;
  }
}
</style>

加上 lang="less" 就可以使用了

 

* 如果不能使用，檢查一下配置：

檢查 /build/utils.js 中  有沒有以下配置

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }