一、简介
- 在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了
style-resources-loader。 - 在确保安装指定
CSS 解析器插件（less、less-loader|stylus、stylus-loader…）后。 - 这里以
less举例，新建一个reset.less(文件名随意)，路径为@/assets/reset.less。
- 单页面导入示例：
<style lang="less" scoped> // 这里的路径不能使用 @ 符号，否则会报错 // @import "@/assets/reset.less"; @import "../assets/reset.less"; .content { color: @dzm-color; } </style>
- 单纯的在
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，加入下面配置
module.exports = { // 安装：style-resources-loader chainWebpack: (config) => { const oneOfsMap = config.module.rule("less").oneOfs.store; oneOfsMap.forEach(item => { item .use("style-resources-loader") .loader("style-resources-loader") .options({ // 这里的路径不能使用 @ 符号，否则会报错 // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"] patterns: "./src/assets/reset.less" }) .end() }) } };
四、上面两种方式选一种
- 配置好之后，重新运行项目进行测试
<template> <!-- 内容 --> <div class="content">DZM - Test</div> </template> <script> export default { } </script> <style lang="less" scoped> // 使用样式，这里将不需要单个页面导入了，直接使用即可 .content { margin-top: 50px; color: @dzm-color; } </style>
