vue开发注意事项--LESS

LESS相关

1.先安装以下模块

npm install less less --save-dev
npm install less less-loader --save-dev

2.在webpack.base.conf文件里添加配置，在 module.exports = 的对象的 module.rules 后面添加一段：

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

3.在代码中的 style 标签中 加上 lang="less" 属性即可

<style scoped lang="less">

</style>

忽然发现上面第2步骤不是必须，因为vue-cli在build/utils里面已经配置好了

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

如果想引入全局的less文件，可以在
main.js里面添加：
import './assets/less/style.less'这里定义的样式在各组件里都可以使用，引入全局Less文件不需要第2步骤