简历魔板__个人简历模板在线生成

在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。

步骤一: 安装node-sass、sass-loader、style-loader

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

步骤二: 安装sass-resources-loader

    cnpm install sass-resources-loader --save-dev

步骤三: 修改build中的utils.js

    scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)

可知,我是在assets中创建了一个global.scss文件。

最后,在组件中的style标签添加lang="scss",就OK了。

附上scss基础教程: https://www.sass.hk/guide/

在vue-cli中安装scss,且可以全局引入scss的步骤的更多相关文章

  1. 在vue-cli中如何安装scss,并全局引入scss

    在vue-cli脚手架采用scss正确的使用姿势 步骤一: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev ...

  2. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  3. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  4. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  5. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  6. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  7. 在vue项目中安装使用Mint-UI

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性:       使用文档: http://mint-ui.github.io/#!/zh-cn Mi ...

  8. vue 项目中安装npm--save-dev 和 --save 命令

    在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...

  9. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

随机推荐

  1. freeswitch对接WEBRTC的一个candidate问题

    概述 近几年,WEBRTC的完善与成熟,使得网页上使用webrtc的应用越来越多. Freeswitch是一个开源的软交换平台,可以直接支持webrtc的对接方式. 最近在测试fs和webrtc的对接 ...

  2. ROS系统-第一讲

    ROS是什么 ROS历史起源 ROS总体设计 系统实现 初次实践

  3. MOS管驱动电路,看这里就啥都懂了

    一.MOS管驱动电路综述在使用MOS管设计开关电源或者马达驱动电路的时候,大部分人都会考虑MOS的导通电阻,最大电压等,最大电流等,也有很多人仅仅考虑这些因素.这样的电路也许是可以工作的,但并不是优秀 ...

  4. 「入门篇」初识JVM (下下) - GC

    垃圾收集主要是针对堆和方法区进行:程序计数器.虚拟机栈和本地方法栈这三个区域属于线程私有的,只存在于> 线程的生命周期内,线程结束之后也会消失,因此不需要对这三个区域进行垃圾回收. GC - J ...

  5. 技能篇:linux服务性能问题排查及jvm调优思路

    只要业务逻辑代码写正确,处理好业务状态在多线程的并发问题,很少会有调优方面的需求.最多就是在性能监控平台发现某些接口的调用耗时偏高,然后再发现某一SQL或第三方接口执行超时之类的.如果你是负责中间件或 ...

  6. iView 一周年了,同时发布了 2.0 正式版,但这只是开始...

    两年前,我开始接触 Vue.js 框架,当时就被它的轻量.组件化和友好的 API 所吸引.之后我将 Vue.js 和 Webpack 技术栈引入我的公司(TalkingData)可视化团队,并经过一年 ...

  7. Column ‘name’ in where clause is ambiguous;

    内容 一.异常信息 严重: Servlet.service() for servlet [dispatcherServlet] in context with path [] threw except ...

  8. lunix或者centos服务器下如何下载自己在github上面的项目代码

    1.在github找到项目压缩包下载地址 打开自己的github主页找到需要下载的项目首页,如图所示,找到zip下载地址(ps:如何找这个地址我就不多说了,了解过一点html的同学肯定很容易可以找到) ...

  9. apache开启图片缓存压缩

    ①-浏览器缓存图片信息 开启Apache的expires模块,重启Apache 2.在虚拟主机的配置文件里面,增加对图片信息缓存的配置,重启Apache 3.在网站目录里面填写测试代码 4.测试效果 ...

  10. Redis分布式实现原理

    一.使用 1.pom.xml导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <ar ...