在vue中使用 scss预处理器(入门篇)

  1. 先下载包,两个包一起下,分开下都行

cnpm install -D sass-loader node-sass

//scoped 加上后此组件的 CSS 只作用于当前组件中的元素,
//如何实现: 是通过给不同组件里的div加上不同的属性

//加上lang="scss" 
<style lang='scss' scoped>
//定义的变量这样组件里需要用到的一样的属性就可以使用这个变量,提高了效率
    $c_r:red;
    $c_t:blue;
    $f_M:"楷体";
    .demo {
        color: bisque;
        font-size: 20px;
        .aaa{
            color: $c_r;
        }
        .bbb{
            color: $c_t;
            font-family: $f_M;
        }
    }
</style> 
不同组件的元素都带有不同的属性 data-v-xxxx
  • 这个包有时下载下来会报错,运行不了


  • 解决办法:

重新下载 将终端关掉 重新 cnpm run serve
如果还不行 简单粗暴的将node_modules包删掉 重新下载依赖 cnpm i

Vue文档连接

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容