交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue2配置scss的方法步骤

    1、安装文件

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

    2、配置 webpack.base.conf.js

    找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

    ...
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    },
    ...
    

    注意:这里loaders和文件中其他配置不同加了s

    3、使用

    1、在使用的地方如下写法

    <style lang="scss" scoped>
      div {
        a {
          color: red
         }
        }
    </style>
    

    2、@import外部导入,如果不加scoped如果在app.vue中导入那么就是全局scss

    <style lang="scss" scoped>
     @import './assets/scss/global.scss';
     * {
      color: red
     }
    </style>
    

    这样写下面的覆盖外部引入的

    注意遇到的坑

    报错

    /node-sass/vendor no such file or directory in node-sass......

    解决方法,运行 rebuild解决了

    npm/cnpm rebuild node-sass --save-dev
    

    更详细的解决方案如下:

    根据package.json,进行npm install node_modules, 运行npm run dev时候,报错,错误如下.

    查看node_modules文件夹,发现,并无vender 文件夹.如下图:

    解决办法:

    上图node-sass文件夹下,新建 vender 文件夹.然后运行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夹,如下图所示:

    就可以了

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • vue项目中使用scss的方法步骤
    • 详解Vue2 添加对scss的支持
    • vue安装和使用scss及sass与scss的区别详解
    • 在 vue-cli v3.0 中使用 SCSS/SASS的方法
    • 详解Vue 全局引入bass.scss 处理方案

    广而告之:
    热门推荐:
    oracle用户权限、角色管理详解

    Oracle 权限设置 一、权限分类: 系统权限:系统规定用户使用数据库的权限。(系统权限是对用户而言)。 实体权限:某种权限用户对其它用户的表或视图的存取权限。(是针对表或视图而言的)。 二、系统权限管理: 1、系统权限分类: DBA: 拥有全部特权,是系统最高权限,只有DB···

    asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)

    我们暂且不说如何去模拟数据,通过一个简单的form看看当请求发生时,客户端提交了什么样的数据给服务端。 下面是一个简单的html form,两个文本输入框,一个文件上传(这里我选择一张图片),注意有文件上传的form的enctype属性。 复制代码 代码如下: <form action="sql···

    jquery异步跨域访问代码

    复制代码 代码如下:/*     $.ajax({         url : url,         type : 'POST',         data : {       &n···

    php正则删除img标签的方法示例[原创]

    本文实例讲述了php正则删除img标签的方法。分享给大家供大家参考,具体如下: 一、问题 正则抓取过程中需要删除正文中的img标签,如: <div>欢迎访问北冥有鱼<img src="//www.kunjuke.com/images/logo.gif" /></div> 要求删除后变成: <div>欢迎访···

    js 编程笔记 无名函数

    1、(function(){alert("hello");})() 2、无名函数 无名函数,其中一个作用可能是生成新的函数对象的引用,主要是用于定义。 另一个用处就是针对js中一些无法含参的回调函数而言的。 明显的例子就是setInterval,我想这是很多人头疼的一个函数,尤其是你想在回调函数中···

    微信小程序实现的picker多级联动功能示例

    本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考,具体如下: wxml部分: <picker mode="multiSelector" bindchange="bindjobcatchange" bindcolumnchange="bingjobcatcolumnchange" value="{{multiIndex}}" range="{{job_cat_list}}" ran···

    html5 实现客户端验证上传文件的大小(简单实例)

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等。本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下。 在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件···

    php 防止表单重复提交两种实现方法

    php 防止表单重复提交 由于网络原因,经常出来点了提交按钮,网页没有反应,而进行再次点击。这样就导致后台收到两次提交,从而进行两次处理,本文章向大家介绍php 防止表单重复提交的几种方法 1、前端解决 方法一: 可以通过前端来解决。当用户点了提交按钮之后,先使用js进行···

    详解Canvas事件绑定

    众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件,很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个ca···

    详解微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的。下面本人就讲下我在···