vue工程为组件自动注入全局样式文件

最新推荐文章于 2024-02-27 17:26:11 发布

原创

最新推荐文章于 2024-02-27 17:26:11 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #less #Webpack

本文介绍了如何在Vue工程中为组件自动注入全局样式文件，特别是Less和Stylus。推荐使用style-resources-loader进行配置，详细讲解了安装该loader以及在vue.config.js中的配置步骤。同时，对于Sass/Scss，提供了原生配置自动导入的方法。文章还提及了在没有预设预处理器时，如何启用CSS预处理器。

开发过程中，随着工程变大，不免要提取出一些公共的样式，如variables、mixins、functions等几乎在所有业务组件中都会用到的样式：

-- src
---- styles
-------- variables.less
-------- mixins.less
-------- functions.less

如果每个需要的组件都要手动导入一次，就太繁琐了：

<script lang="less">
@import "../styles/variables";
@import "../styles/mixins";
@import "../styles/functions";

// 其他样式
</script>

当然最直接的改进方案是创建一个包含上面引入的入口样式文件entry.less，然后在各组件中导入即可：

// entry.less

@import './variables';
@import './mixins';
@import './functions';

<script lang="less">
@import "../styles/entry";

// 其他样式
</script>

但是手动导入毕竟繁琐，若能够自动导入就大善了，所幸配置自动导入也不繁琐，下面以常用的Less、Stylus、Sass/Scss等预处理器为例说明如何在vue工程中配置自动导入：

Less和Stylus

配置Less和Stylus自动导入有两种方案：

使用style-resources-loader
使用vue-cli-plugin-style-resources-loader

这里我们推荐使用第一种，因为第二种方案只是对第一种方案的包装，且暂不支持热更新。

安装style-resources-loader

$ npm i -D style-resources-loader

配置vue.config.js

如果工程根目录下没有vue.config.js文件，手动创建一下即可，然后插入以下代码：

// vue.config.js
const path

最低0.47元/天解锁文章