vue项目配置sass及引入外部scss文件方式

目录
  • 配置sass及引入外部scss文件
    • 配置sass
    • 引入外部scss文件
    • 如果显示错误为如下图所示
    • 记住此时需要重启项目 npm run dev
  • 踩过的坑 Vue引入Sass文件
    • 问题来了，为什么呢？

配置sass及引入外部scss文件

配置sass

安装对应依赖node模块

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

引入外部scss文件

在main.js中引入需要的scss文件

如果显示错误为如下图所示

打开webpack.base.config.js，删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的，只要你装node-sass 和sass-loader，不需要自己添加配置。

记住此时需要重启项目 npm run dev

踩过的坑 Vue引入Sass文件

问题：在使用vue cli 3.0开发自己网页的过程中，想把CSS样式单独抽离出来，因为Sass的嵌套写法显得层次十分清晰，所以我个人是十分喜欢的。

但是在CSS样式单独抽离形成文件之后再引入，发现只有第一层样式作用上了。

问题来了，为什么呢？

CSS
.section{
	/*  只有这层作用上了 */
	width: 500px;
	height: 500px;
	background-color: #409EFF;

	.header{
		width: 500px;
		height: 100px;
		background-color:#67C23A
	}

	.main{
		width: 500px;
		height: 300px;
		background-color:#E6A23C;
	}

	.footer{
		width: 500px;
		height: 100px;
		background-color:#F56C6C;
	}
}

首先我尝试了在vue文件中直接写Sass样式，结果是可以作用上的，但是为什么单独抽离出来没作用？

然后再把命令运行一次

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

vue cli 3.0 之后就没有config.js、build等文件或文件夹，所以不用配置，直接使用就可以了。

命令运行完之后还是不行。

于是开始百度，隐隐约约感觉到问题出现在引入的时候，而不是解析的时候。

百度 @import url("./xxx.sass") 和 @import “./xxx.sass” 的区别

得到官方答案

Sass支持原生的CSS@import，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import：

  • 被导入文件的名字以.css结尾
  • 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
  • 被导入文件的名字是CSS的url()值。

这就是说，你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

所以造成一开始Sass文档解析不正确。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中引入Sass实例方法

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • vue项目中全局引入1个.scss文件的问题解决

    vue项目中全局引入1个.scss文件的问题解决

    首先先发一下我的项目路径 1. 首先要下载   sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.reso

  • vue项目配置sass及引入外部scss文件方式

    vue项目配置sass及引入外部scss文件方式

    目录 配置sass及引入外部scss文件 配置sass 引入外部scss文件 如果显示错误为如下图所示 记住此时需要重启项目 npm run dev 踩过的坑 Vue引入Sass文件 问题来了,为什么呢? 配置sass及引入外部scss文件 配置sass 安装对应依赖node模块 npm install node-sass --save-dev npm install sass-loader --save-dev 引入外部scss文件 在main.js中引入需要的scss文件 如果显示错误为如下

  • Spring引入外部属性文件配置数据库连接的步骤详解

    Spring引入外部属性文件配置数据库连接的步骤详解

    直接配置数据库的信息 xml配置文件直接配置: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.sprin

  • vue项目配置使用flow类型检查的步骤

    你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug.Flow就是JavaScript的静态类型检查工具,该库的目标在于检查JavaScript中的类型错误,开发者通常不需要修改代码即可使用,故使用成本很低.同时,它也提供额外语法支持,使得开发者能更大程度地发挥Flow的作用. 一.flow的安装 flow可以直

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    web端的微信支付可分为JSAPI与H5 JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器. 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码: // 调用后端接口拿到JSAPI支付所需参数,我在beforeRouteEnter的时候调用. api.apply.jsApiPay(obj).then(res => { if (res.data.code === '0000') { vm.params = res.d

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue项目配置同一局域网可使用ip访问的操作

    1.检查 package.json文件,scripts.dev设置 host改成 "0.0.0.0" 2.config文件中找到 index.js 文件的host改成 "0.0.0.0" 此处的"0.0.0.0"可以改成自己的ip,重启项目就可以了 补充知识:@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug,用

  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的. 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • 详解如何在你的Vue项目配置vux

    详解如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux. 1.项目里安装vux npm install vux --save 2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)

随机推荐