uniapp引入less全局样式
时间: 2023-09-04 21:17:43 浏览: 133
关于我们-VUE模板 UNIAPP模板 布局、样式、JS分离
在uniapp中引入less全局样式,需要先安装less-loader和less依赖:
```
npm install less-loader less --save-dev
```
然后在项目根目录下创建一个`vue.config.js`文件,如果已存在则直接修改。
```
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
```
上面的配置中,我们将less的`javascriptEnabled`设置为`true`,以便在样式文件中使用JavaScript。
接着在`App.vue`中引入全局样式文件,可以是`.less`或`.css`文件:
```
<style lang="less">
@import "@/assets/styles/variables.less";
@import "@/assets/styles/mixins.less";
@import "@/assets/styles/global.less";
</style>
```
这里我们通过`@import`来引入全局样式文件,`@`表示项目根目录。
最后,在样式文件中定义全局变量和混合器,例如:
```
@primary-color: #409EFF;
.border-radius(@radius: 4px) {
border-radius: @radius;
}
```
在需要使用的地方直接调用即可:
```
.button {
background-color: @primary-color;
.border-radius();
}
```
以上就是在uniapp中引入less全局样式的方法。
阅读全文