Vue-cli3.0引入全局预加载样式---以less为例

最新推荐文章于 2024-08-23 13:29:29 发布

WX_安琪拉打野怪

最新推荐文章于 2024-08-23 13:29:29 发布

阅读量2.1k

点赞数 7

分类专栏： vue js

本文链接：https://blog.csdn.net/weixin_42011096/article/details/106126811

版权

本文介绍了在Vue-cli3.0中引入全局预加载样式的三种方法：自动化导入、使用style-resources-loader插件和向预处理器传递选项。详细步骤包括安装所需组件、配置vue.config.js以及处理Less变量的导入。每种方法都有其适用场景，其中通过style-resources-loader插件的方式更为便捷。

摘要由CSDN通过智能技术生成

方式一: 自动化导入

1.npm安装style-resources-loader

2.在vue.config.js中添加以下代码:

 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/common.less')
      ]
    })
}

代码整体图: