2024年前端最新Vue 配置全局样式（style-resources-loader），一个前端妹子的面试笔记

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 单页面导入示例：

• 单纯的在 main.js 文件中引入是无法实现全局样式的 import '@/assets/reset.less'，这种方式是错误的。

• 下面两种配置方式都不需要在 main.js 文件中引入 import '@/assets/reset.less'，配置好之后直接使用即可。

二、配置方式一

• 安装 style-resources-loader

$ npm i style-resources-loader

• 安装 vue-cli-plugin-style-resources-loader

$ npm i vue-cli-plugin-style-resources-loader

• 创建 vue.config.js，加入下面配置

const path = require(‘path’);

module.exports = {

// 安装 style-resources-loader 与 vue-cli-plugin-style-resources-loader

pluginOptions: {

‘style-resources-loader’: {

preProcessor: ‘less’,

// 这三种 patterns 写法都是可以的

// patterns: [“./src/assets/reset1.less”, “./src/assets/reset2.less”]

// patterns: “./src/assets/reset.less”

patterns: [

// 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错

// path.resolve(__dirname, ‘./src/assets/reset.less’)

path.resolve(__dirname, ‘src/assets/reset.less’)

]

}

}

};

三、配置方式二

• 安装 style-resources-loader

$ npm i style-resources-loader

• 创建 vue.config.js，加入下面配置

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

89e65ecb71ac0)**