使用Vue编写css预处理器的方法

style 标签上还有一个 lang 属性，用于定义 css 的编写方式，是否使用 css 预处理器。

 

如果想使用 css 预处理器 需要先安装对应的 css 预处理器插件。

 这里以 less 预处理器为例，安装命令：

npm  i  less - loader

查看 less 历史版本命令：

npm  view  less-loader  versions

安装 less 指定版本命令：

npm i less - loader @7

注：@ 符后的数字表示你要安装的版本号，以上表示安装 7 点几版本。

安装完成后，设置 lang 属性的值为 less，然后就可以使用 less 来写 css 样式了。

<template>
    <div class="add">
        <h1>添加页面</h1>
        <p>你好呀！！！</p>
    </div>
</template>

<script>
export default {
    name: "Add"
}
</script>

<style lang="less" scoped>
.add {
    h1 {
        background-color: aqua;
    }
    p {
        font-size: 30px;
        background-color: blue;
    }
}
</style>

以 add.vue 组件为例，样式都可以正常使用。

 

注：lang 属性的默认值为 css，可以不写 lang 属性 但是不允许设置 lang 属性为空。

<template>
    <div class="add">
        <h1>添加页面</h1>
        <p>你好呀！！！</p>
    </div>
</template>

<script>
export default {
    name: "Add"
}
</script>

<style lang="" scoped>
.add{
    background-color: aqua;
}
</style>

注：设置 lang 属性为空时会报错 要么就不写 写了就要定义 css 的编写方式。

 

原创作者：吴小糖

创作事件：2023.4.6