在使用scss是可能会添加loader,例如

  {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}

然而当使用vue-cli脚手架创建项目时,可能出现如下错误:

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
in G:......................\src\components\common\css\reset.scss (line 1, column 1)

这是loader重复导致的,在build/utils.js中的exports.cssLoaders中已经返回相关loader了,

  // 这两行:
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),

解决方案很简单:

就是自己不要加样式相关的loader了;
或者自己添加样式的loader但要注释掉这两行,当然如果你用的是less就注释掉对应的行就可以了。

vue的采坑之旅--vue-cli脚手架loader重复--Invalid CSS after "...load the styles": expected 1 selector or at-rule的更多相关文章

  1. webpack入坑之旅(二)loader入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"

    首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...

  3. vue+canvas踩坑之旅

    let img=new Image(); if(img.complete) { console.log('dd'); } img.src="http://localhost:8888/sta ...

  4. 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅

    起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...

  5. JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案

    我拍个砖,通常标称自己文章完美解决何种问题的,往往就是解决不了任何问题! 众所周知,JSPDF是一个开源的,易用的,但是对中文支持非常差的PDF库. 下面,我教大家,如何在pdf中使用思源黑体.思源黑 ...

  6. CentOS7.6系统安装详解(含真机装系统的采坑之旅)!

    刚开始学习linux操作系统是总是很茫然,无所适从,以下是自己总结的工作经验,仅供参考! 一.准备资源 安装前需要准备的资源有linux系统centos7.6发行版系统镜像,vmware workst ...

  7. angular5采坑之旅

    开始尝试angular5,在此记录下踩过的坑以备查询 1.按照element-angular的文档引入后报错 is not part of the compilation output.解决方法--在 ...

  8. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  9. mac 如何卸载node和npm采坑之旅

    因为本地npm一直报错,所以决定直接卸载node和npm,重新装.第一次卸载,具体咱也不会呀!能咋整呢,百度呗 茫茫百度中各种找呀,找到一个转载最多的方法 sudo npm uninstall npm ...

随机推荐

  1. Java集合 -- ArrayList集合及应用

    JAVA集合 对象数组 集合类之ArrayList 学生管理系统 斗地主案例 NO.one 对象数组 1.1 对象数组描述 A:基本类型的数组:存储的元素为基本类型 int[] arr={1,2,3, ...

  2. Android View的事件分发机制和滑动冲突解决方案

    这篇文章会先讲Android中View的事件分发机制,然后再介绍Android滑动冲突的形成原因并给出解决方案.因水平有限,讲的不会太过深入,只希望各位看了之后对事件分发机制的流程有个大概的概念,并且 ...

  3. Android微信支付SDK开发

    一.准备工作 1.开发平台及SDK下载 微信开放平台 https://open.weixin.qq.com 下载SDK 微信支付Demo下载 http://pay.weixin.qq.com/wiki ...

  4. url override and HttpSession implements session

    背景 HttpSession默认使用Cookie存储Session ID,如果在用户禁用浏览器Cookie的功能后,仍打算运用HttpSession来进行会话管理,那么可以搭配URL重写来实现. 实现 ...

  5. angularjs初识ng-app、ng-model、ng-repeat指令

    ng-app属性是angular.js的标志语句,它标记了angular.js的作用域.ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用.也可以 ...

  6. 第四章 数据更新 4-1 数据的插入(INSERT 语句的使用方法)

    一.什么是INSERT 用来插入数据的SQL就是INSERT语句.   二.INSERT 语句的基本语法. 列清单 值清单 列清单和值清单的列数必须保持一致,如果不一致会出错.   原则上,执行一次I ...

  7. git 代码上传至远程仓库&从远程库克隆到本地

    1.下载安装Git.下载:https://git-scm.com/downloads  安装:可参考文章http://blog.csdn.net/zzfenglin/article/details/5 ...

  8. 使用yii AR 完成单个表的CURD操作

    什么是AR(ActiveRecord) Active Record (活动记录,以下简称AR)提供了一个面向对象的接口, 用以访问数据库中的数据.一个 AR 类关联一张数据表, 每个 AR 对象对应表 ...

  9. 一、DAO设计模式 二、DAO设计模式的优化 三、JDBC中的事务,连接池的使用

    一.DAO设计模式概述###<1>概念 DAO,Data Access Object ,用于访问数据库的对象. 位于业务逻辑和数据持久化层之间,实现对数据持久化层的访问![](1.png) ...

  10. php 分享一个object(stdclass)转数组的函数

    经常调用一个借口之后 返回的内容是json串,利用php函数json_decode() 解析json串之后得到的 数据类型为object(stdclass) 这是一个对象,要取其中的内容也可以 取得, ...