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')
  }