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

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

安裝方式一:vue

npm install less less-loader --save-dev

安裝less和less-loader,並記錄到devDependencies中,由於這是咱們在開發中使用的而非在生產中使用webpack

安裝方式二:web

或直接在 package.json 的 devDependencies 中vue-cli

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

而後 cnpm i 安裝一下npm

使用:json

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

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

 

* 若是不能使用,檢查一下配置:less

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

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
相關文章
相關標籤/搜索