当前位置:实例文章 » HTML/CSS实例» [文章]uniapp 引入 Less & SCSS

uniapp 引入 Less & SCSS

发布人:shili8 发布时间:2023-06-26 16:29 阅读次数:559

在使用uniapp进行开发时,我们可能会遇到需要使用Less或SCSS的情况。这两种预处理器可以帮助我们更方便地编写CSS样式,提高开发效率。本文将介绍如何在uniapp中引入Less和SCSS,并提供部分代码示例和注释。

一、引入Less

1. 安装less-loader

在使用Less之前,我们需要先安装less-loader。在终端中输入以下命令进行安装:

npm install less-loader less --save-dev


2. 配置webpack

在uniapp中,我们需要修改webpack配置文件来支持Less。在项目根目录下创建vue.config.js文件,并添加以下代码:

javascript
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('less')
      .test(/.less$/)
      .use('less-loader')
      .loader('less-loader')
      .end()
  }
}


这段代码的作用是在webpack中添加一个Less的loader,使得webpack能够识别并编译Less文件。

3. 创建Less文件

在项目中创建一个Less文件,例如style.less,并在其中编写Less样式代码。以下是一个简单的示例:

less
@primary-color: #007aff;

.button {
  background-color: @primary-color;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}


这段代码定义了一个变量@primary-color,并在.button类中使用了这个变量。

4. 在组件中引入Less文件

在需要使用Less样式的组件中,使用@import语句引入Less文件。例如,在HelloWorld.vue组件中引入style.less文件:

vue
<template>
  <view class=hello>
    <text class=title>{{ msg }}</text>
    <button class=button>Click me</button>
  </view>
</template>

<script>
export default {
  name: 'HelloWorld'
  data() {
    return {
      msg: 'Welcome to Your uni-app'
    }
  }
}
</script>

<style lang=less>
@import @/style.less;

.title {
  font-size: 36px;
  text-align: center;
  margin-top: 100px;
}

.button {
  margin-top: 50px;
}
</style>


这段代码中,我们在