VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue2配置scss的方法步骤

    建站教程 2019年11月09日 关键词:,,,

    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 处理方案

    广而告之:
    热门推荐:
    PHP日期处理函数 整型日期格式

    当我过去用ASP时解决这个问题相当简单,ASP有相应的函数DateDiff可以给出两个日期间间隔多少月、多少天和多少秒。当我搜寻完PHP手册后我发现PHP并没有类似的函数。 本文包含以下内容: 1、 得到目前的日期和时间-我们有多少种方式? 2、 改变日期显示的方式-日期和时间···

    mysql count详解及函数实例代码

    mysql count详解 count函数是用来统计表中或数组中记录的一个函数,下面我来介绍在mysql中count函数用法。 count(*) 它返回检索行的数目, 不论其是否包含 NULL值。 SELECT 从一个表中检索,而不检索其它的列,并且没有 WHERE子句时, COUNT(*)被优化到最快的返回速度。 例如···

    PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)

    如果做一个在线的文件管理系统的话,那么首先必须知道怎么读取目录和文件,其实这个功能几行代码就可以实现了。 输出效果: 实现代码: 复制代码 代码如下:<?php $dir = "D:/";  //要获取的目录 echo "********** 获取目录下所有文件和文件夹 *******···

    PHP多文件上传实例

    本文实例讲述了PHP多文件上传的方法。分享给大家供大家参考。具体如下: <?php define('ROOT','D:/Program Files/www/test/'); class Files_Tool{ protected static $allowExt=array('.jpg','.jpeg','.png','.gif','.bmp','.svg','.chm','.pdf','.zip','.rar','.tar'···

    PHP采用curl模仿用户登陆新浪微博发微博的方法

    本文实例讲述了PHP采用curl模仿用户登陆新浪微博发微博的方法。分享给大家供大家参考。具体实现方法如下: 现在用php做模仿用户登录我们都会使用到PHP curl函数了,因为只有它才可以实现像用户一样的去访问别人网站了,下面就给大家介绍一下curl登陆新浪微博发微博应用例子。 ···

    MySQL主从延迟现象及原理分析详解

    一、现象 凌晨对线上一张表添加索引,表数据量太大(1亿+数据,数据量50G以上),造成主从延迟几个小时,各个依赖从库的系统无法查询数据,最终影响业务。 现在就梳理下主从延迟的原理。 二、原理 根据 MySQL 官方文档 MySQL Replication Implementation Details 中的描述,MySQL···

    mysql中迅速插入百万条测试数据的方法

    对比一下,首先是用 mysql 的存储过程弄的: 复制代码 代码如下: mysql>delimiter $ mysql>SET AUTOCOMMIT = 0$$ mysql> create procedure test() begin declare i decimal (10) default 0 ; dd:loop INSERT INTO `million` (`categ_id`, `categ_fid`, `SortPath···

    让Json更懂中文(JSON

    复制代码 代码如下: <?php echo json_encode("中文"); //"\u4e2d\u6587" 这就让我们这些在天朝做开发的同学, 很是头疼, 有的时候还不得不自己写json_encode. 而在PHP5.4, 这个问题终于得以解决, Json新增了一个选项: JSON_UNESCAPED_UNICODE, 故名思议, 就是说, Jso···

    让人想亲自体验的17个404页面

       对404都是避之不及,何来体验之说?原因可能是大多数404页面 都太粗糙了,而今天这组404页面 ,绝对能颠覆你之前一切对404的看法 >>>   Blue Daniel   dario brozzi   Mashable   Template Monster   Defrozo   Diesel   StickerMule   cent···

    Bootstrap table学习笔记(2) 前后端分页模糊查询

    在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1、前端分页 2、后端分页 3、模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿。 $(function(){ a(); }); function a () { $('#yourtable').b···