vue 使用style-resources-loader和vue-cli-plugin-style-resources-loader全局配置less

80 阅读 0 评论 53 点赞

我是靠谱客的博主玩命仙人掌，最近开发中收集的这篇文章主要介绍vue 使用style-resources-loader和vue-cli-plugin-style-resources-loader全局配置less，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.安装 style-resources-loader和vue-cli-plugin-style-resources-loader

vue add style-resources-loader

2.新建一个variable.less文件内容如下；并引入main.js文件中

variable.less代码：

@common-color:'#fff';
@common-bg: blue;

main.js代码：

import 'assets/css/variable.less'

3.修改vue.config配置如下

const path = require('path');
function resolve (dir){
    return path.join(__dirname,dir)
}
let config = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    publicPath: process.env.NODE_ENV === 'production' ? '/public/itoa' : '/public/itoa',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: "itoa",
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    chainWebpack:(config)=> {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
    },
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://47.100.47.3/',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
    **pluginOptions: {
        "style-resources-loader":{
            preProcessor: "less",
            patterns:[path.resolve(__dirname,'src/assets/css/variable.less')]
        }
    }**
}
module.exports = config;

4.页面里面直接引用以及效果

<template>
    <div class="main">
        <el-input  v-model="input" @change="changeSeletc" placeholder="请输入内容"></el-input>
    </div>
</template>

<script>
 
</script>

<style lang="less" scoped>
.main{
    width: 100%;
    height: 100%;
    background-color: @common-bg;
}
</style>