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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/maindek/article/details/81773973

vue 组件中使用less，sass

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

1. 下载语法支持-loader
2. 在webpack.config.js 中配置语法支持
3. 在组件中添加语法 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>

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