版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/maindek/article/details/81773973
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>
具体步骤已经在代码中了,欢迎指教