vue项目使用less定义全部变量

vue项目要使用less首先要下载less插件

npm install less less-loader --save

然后在vue页面的style使用

<style lang="less" scoped></style>

那么这个使用你的项目就支持less css预处理

然后如果你想使用css的全局变量，这个时候需要定义一个less文件，然后在项目引入，一开始想直接在main.js中引用，发现是不起效果的，这个时候你需要这样操作

1、下载sass-resources-loader 插件

npm install less sass-resources-loader --save

然后修改build中的utils.js

把原来的 less: generateLoaders('less'),注释，添加一下代码

less: generateLoaders('less').concat({

            loader: 'sass-resources-loader',

            options: {

                resources: path.resolve(__dirname, '../static/css/index.less')

            }

        }),