vue-cli3 + webpack4 搭建换肤功能

最新推荐文章于 2020-11-25 03:19:02 发布

crq131290x

最新推荐文章于 2020-11-25 03:19:02 发布

阅读量566

点赞数 2

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/crq131290x/article/details/103633111

webpack 专栏收录该内容

2 篇文章

订阅专栏

在项目中实现一键换肤功能，采用style-loader方式，但因vue-cli3和webpack4的封装导致配置复杂。通过将原SASS方案改为LESS并解决loader找不到的问题，最终在style-loader中找到解决方案，使用style-loader并设置injectType为'lazyStyleTag'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中有个一键换肤的功能，百度后发现有很多demo，最终采用style-loader方式

由于使用vue-cli3创建的项目，对webpack配置都进行封装了，导致使用起来极度不习惯

原文作者是使用sass的，改成相应less方式

    // 换肤loader
    const less = config.module.rule('less').toConfig();
    const useable = { ...less.oneOf[3], test: /\.useable\.less$/ };
    useable.use = [...useable.use];
    useable.use[0] = { loader: "style-loader/useable"}         
      ;//style-loader/url 找不到对应loader
    config.module.rule('less').merge({ oneOf: [useable] });

项目运行时始终报错找不到对应的loader，百度一圈也没对应解决方法

最后在style-loader上找到解决方案

useable.use[0] = { loader: "style-loader", options: { injectType: 'lazyStyleTag' } } ;//style-loader/url 找不到对应loader

不采用style-loader/useable而使用style-loader，并添加options: { injectType: 'lazyStyleTag' }

style-loader地址：https://github.com/webpack-contrib/style-loader

原文作者：https://www.cnblogs.com/webSciprt/p/ji-yuwebpack4vuecli3xiang-mu-de-huan-fu-gong-neng.html