Rumah  >  Artikel  >  hujung hadapan web  >  在vue cli webpack中如何使用sass(详细教程)

在vue cli webpack中如何使用sass(详细教程)

亚连
亚连asal
2018-06-04 16:54:192247semak imbas

这篇文章主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下

1:安装依赖

npm install sass-loader node-sass --save-dev

2:html中 修改style

<style lang="sass">
 /* write sass here */
</style>

3: 使用正常sass 语法

//但是会报错
<style lang="sass">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // 解决方案一 记得属相前面一定是两个空格
<style lang="sass">
 $highlight-color: #F90
 $highlight-border: 1px solid $highlight-color
 .selected 
  border: $highlight-border
</style>
// 解决方案二 sass 修改为 scss
<style lang="scss">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
  border: $highlight-border
 }
</style>
// 官方解决方案 你需要配置 vue-loader 的选项
{
 test: /\.vue$/,
 loader: &#39;vue-loader&#39;,
 options: {
 loaders: {
  scss: &#39;vue-style-loader!css-loader!sass-loader&#39;, // <style lang="scss">
  sass: &#39;vue-style-loader!css-loader!sass-loader?indentedSyntax&#39; // <style lang="sass">
 }
 }
}

链接:  https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

4:引用sass/scss 文件

@import "./common/scss/mixin";

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中bus全局事件中心(详细教程)

详细解读Angular系列中变化检测问题

在vue-cli下使用vuex(详细教程)

Atas ialah kandungan terperinci 在vue cli webpack中如何使用sass(详细教程). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn