Vue创建项目、安装插件、引入全局的less变量

一、查看npm环境变量配置：

①使用快捷键windows+r打开任务管理器
②输入cmd进入
③检查是否安装，成功会返回版本号

node -v
npm -v

• 1
• 2

安装node：/en/download/

二、创建vue项目，安装插件

①切换盘符

切换E盘：输入  E:
切换到具体的文件夹：输入  cd E:\工作\2022

• 1
• 2

②创建vue项目：vue init webpack luzheng(项目名)
③在中引入css公共样式

import '../static/css/' /*引入公共样式*/

• 1

④安装less、less-loader

npm install less less-loader --save    //一起安装

• 1

如果需要下载指定版本：

npm install less@5.6.0 --save     //下载指定版本的less
npm install less-loader@5.0.0 --save    //下载指定版本的less-loader

• 1
• 2
• 3

安装成功后在文件中有提示：

找到build/文件，找到module下的rules配置

{
        test: /.less$/,
        loader: "style-loader!css-loader!less-loader" 
 }

• 1
• 2
• 3
• 4

⑤安装scss

npm install sass-resources-loader --save-dev

• 1

然后在build 的中 = function (options) {}中加上以下代码：

 function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        (__dirname, '../src/assets/styles/'),
                    ]
                }
            }
        ];
        if () {
            return ({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

(__dirname, '../src/assets/styles/') 把路径改成想要引入的全局less 文件， 然后后面将下面代码中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()。

修改完配置文件一定要记得重启服务器！！！：npm run dev 运行

在公共的less文件里定义变量：

// 颜色
@baseColor:#fe332d;

// 文字
@font12:12px;
@font14:14px;
@font16:16px;
@font18:18px;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

在组件中，就可以使用全局变量了。

<style lang="less" scoped>
	.to_be_completed {
		font-size: @font16;
	}

	.to_be_completed::after {
		background-color: @baseColor;
	}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10