ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vuecli3 版本vant主题样式无法修改问题以及设置less全局

2019-10-26 16:41:45  阅读:1292  来源: 互联网

标签:src style resolve vant vuecli3 less path config


问题记录,vant根据官方文档修改样式文件的时候无论如何处理都无法引入,

在这里插入图片描述
在这里插入图片描述
解决方案是吧代码块

'hack': `true; @import "${path.join(__dirname, './src/assets/style/less.less')}";

复制到Demo中然后运行Demo文件,运行然后成功。。。不知道为什么反正找不到原因,
然后把代码复制到自己代码上就成功了。。。。也不知道为什么,还是找不到原因。。。
根据官方提示已经在这里插入图片描述吧文件路径修改为绝对路径了path.join(__dirname, ‘./src/assets/style/less.less’) 但是发现还是不行,反正就复制来复制去就好了。。找不到原因和原理。。。

less设置全局,所有代码都在 vue.config.js里面,参考文档,需要注意路径 这个楼主写错地址了。。

chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/style/style.less'), // 需要全局导入的less
      ],
    })
}

vue.config.js完整代码


const path = require('path')
const webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/wechat' : '/',
  outputDir: process.env.outputDir,

  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    },
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  },

  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))

  },
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
  
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // less 文件覆盖(文件路径为绝对路径)
          'hack': `true; @import "${resolve('./src/assets/style/less.less')}";`
          // 'hack': `true; @import "${path.join(__dirname, './src/assets/style/less.less')}";`
        },
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    // development server port 8000
    port: 8899,
    open: true,
    //   proxy: {
    //     '/api': {
    //       // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //       target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //       ws: false,
    //       changeOrigin: true
    //     }
    //   }
  },

  lintOnSave: undefined,
  // babel-loader no-ignore node_modules/*
  transpileDependencies: []
}

function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/style/style.less'), // 需要全局导入的less
      ],
    })
}

标签:src,style,resolve,vant,vuecli3,less,path,config
来源: https://blog.csdn.net/qq2037074969/article/details/102757580

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有