一、npm安裝node-sass句占，sass-loader型檀，使用save保存到package.json
npm install node-sass --save-dev
npm install sass-loader --save-dev
二甚纲、增加webpack配置
1、打開webpack配置文件曲楚，在module -> rules增加配置
rules: [{
// ...
},
{
test: /\.scss$/,
loader: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentedSyntax: true
}
}
}
]
},
{
// ...
}
]
2厘唾、webpack2中的配置
rules: [
// {test: /\.svg$/, loader: 'url-loader'},
{test: /\.scss$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader']},
{test: /\.sass$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']},
// {test: /\.vue$/, loader: 'vue-loader', options: {loaders: {js: {loader: 'babel-loader', options: {presets: ['env'], plugins: ['transform-object-rest-spread']}}}}}
]
三、vue文件中使用
<template>
<div>
<div class="parent">
<div class="children">子節(jié)點</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass">
.parent
text-algin: center
.children
font-size: 12px
</style>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
