vue 组件中使用less，sass，stylus 语法

最新推荐文章于 2025-06-14 20:01:51 发布

maindek

最新推荐文章于 2025-06-14 20:01:51 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/maindek/article/details/81773973

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并使用LESS与SASS这两种CSS预处理语言，包括安装必要的依赖包、配置Webpack以及在组件样式中应用LESS与SASS的方法。

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

vue 组件中使用less，sass

vue中使用css预处理语法其实很简单，主要流程：

下载语法支持-loader
在webpack.config.js 中配置语法支持
在组件中添加语法 lang=’less|scss|stylus’

下边直接上代码吧！

    <!-- <style lang='stylus' scoped>
    div
        h1
            color: blue;


</style> -->
<!-- <style rel='stylesheet/less' lang='less' scoped>
     @col:blue;
     div h1{
         color: @col;
     }
 </style>-->

<style lang="scss" scoped>
    $col:red;
    div{
        h1{
            color:$col;
        }
    }
</style>


<template>
    <div>
        <h1>我是app组件1</h1>
        <h1>我是app组件2</h1>

        <h2>name:{{name}},age:{{age}},sex:{{sex}}</h2>
        <p>
            使用less：
                <pre>   <b>cnpm install less less-loader --save-dev</b>
        在webpack.config.js 中的rules中添加：
            ,{
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
        组件中使用：
            style标签中加入属性： rel='stylesheet/less' lang='less' scoped
                </pre>
        </p>
        <p>
            使用sass：
            <pre>
                <b>cnpm install sass node-sass --save-dev</b>
                在webpack.config.js 中的rules中添加：
                ,
                    {
                    test: /\.scss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ],
                    },
                    {
                    test: /\.sass$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader?indentedSyntax'
                    ],
                    }
                组件中使用：
                    style标签中加入属性： lang='scss' scoped

            </pre>
        </p>
    </div>

</template>
<script>
    export default{
        data(){
            return{
                name:'李四',
                age:23,
                sex:'男'
            }
        }
    }
</script>

具体步骤已经在代码中了，欢迎指教