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

在写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. Lambda8 表达式

    Lambda 表达式 Lambda 表达式是 JDK8 的一个新特性,可以取代大部分的匿名内部类,写出更优雅的 Java 代码,尤其在集合的遍历和其他集合操作中,可以极大地优化代码结构. JDK 也提 ...

  2. 13_奈奎斯特稳定性判据_Nyquist Stability Criterion_Part 1

    A曲线内有4个极点两个零点,则B曲线绕(0,0)逆时针两圈 A曲线是nyqyict contour中的曲线,P是A曲线内的()极点个数,Z是()极点个数,N是曲线B逆时针围绕(-1,0)的圈数 没过( ...

  3. 顺利通过EMC实验(3)

  4. mobileSite开发Tips

    1,根节点(html,body)overflow属性会遮盖fixed定位元素 2,fixed元素点击时会弹出底部的菜单,应该是浏览器特性(safari) 3,fixed元素使用后,在body里面使用p ...

  5. 破解浏览器同源政策利器之JSONP

    本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP.主要通过阮一峰老师的博客学习 浏览器的同源规则 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而 ...

  6. spark-shell报错java.lang.IllegalArgumentException: java.net.UnknownHostException: namenode

    在使用spark on yarn启动spark-shell时,发现报错: 是说找不到主机名为namenode的主机,那么应该是配置文件出错了. 经过检查,发现是spark-defaults.conf文 ...

  7. source /etc/profile 不起作用?

    给Linux配置了环境变量,source /etc/profile 完成之后只在当前用户下起作用,切换用户后设置的环境变量竟然没有生效!重启后虽然生效了,但是想知道怎么回事. 找到了如下解答: 假设你 ...

  8. PyQt5 基本语法(四)

    目录 2. 输入控件(一) 2.1 纯键盘 2.1.1 QLineEdit 2.1.1.1 描述 2.1.1.2 控件创建 2.1.1.3 输出模式 2.1.1.4 提示字符串 2.1.1.5 清空按 ...

  9. 基于kubernetes的分布式限流

    做为一个数据上报系统,随着接入量越来越大,由于 API 接口无法控制调用方的行为,因此当遇到瞬时请求量激增时,会导致接口占用过多服务器资源,使得其他请求响应速度降低或是超时,更有甚者可能导致服务器宕机 ...

  10. MySQL入门学习day3随笔2

    用户创建及权限部分 1 create user Cra2iTeT identified by '123456'-- 创建用户 2 3 alter user 'Cra2iTeT'@'%' identif ...