1初始化项目并且引入scss
vue.vonfig.js
这个文件引入mian.scss
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
scss: {
prependData: `@import "./src/styles/main.scss";`
}
}
},
main.scss.凡是scss文件统统引入到mia.scss中
// @import "./elementui.scss";
@import "./normalize.scss"; @for $i from 1 through 110 {
.margin-left-#{$i} {
margin-left: (1px * $i);
}
}
.text-overflow {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
App.vue
一定是如下格式。 scss文件才会生效
<style lang="scss">
/* 不能去掉 */
#app {
}
</style>
1初始化项目并且引入scss的更多相关文章
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue项目 安装和配置sass & main.js引入scss文件报错
通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...
- vue初始化项目,构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- 在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- Vue笔记:在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- 初探angluar_01 目录结构分析及初始化项目
简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录 用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- vue-cli3初始化项目
1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...
随机推荐
- SSH全注解-annotation详细配置
web.xml的配置: <!--Spring的装载器 --> <listener> <listener-class> org.springframework.web ...
- Python学习笔记之 Python设计思想&设计原则
Python设计思想&设计原则 设计思想 1.封装 数据角度 多种数据合为一种数据 优势:代码可读性高 将数据与行为相关联 例如:电脑(内存,储存空间,...) 行为角度 ...
- MySQL数据库安装,MySQL数据库库的增删改查,表的增删改查,表数据的基本数据类型
一 MySQL的安装 MySQL现在属于甲骨文公司,所以和java语言匹配度较高,同时甲骨文公司的另一种数据库为Oracle,两者同为关系型数据库,即采用关系模型来组织数据,以行和列的方法来存储数据的 ...
- C#LeetCode刷题-数组
数组篇 # 题名 刷题 通过率 难度 1 两数之和 C#LeetCode刷题之#1-两数之和(Two Sum) 43.1% 简单 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组 ...
- windows下mongoDB的下载和安装
1.进入mongoDB官网,官网地址:https://www.mongodb.com 2. 点击Try free按钮,进入下载页面 3.点击download进行下载:下载完成如下图: 4.点击下载的 ...
- Ubuntu18.04安装Nautilus-actions自定义文件管理器鼠标右键列表
sudo add-apt-repository ppa:daniel-marynicz/filemanager-actions #需要添加源 sudo apt-get install filemana ...
- Centos7重置root密码(详细版)
修改了root密码,步骤如下: 步骤一:在开机出现如下界面的时候就按“e”键 步骤二:在步骤一按下”e”键之后,出现如下界面,按 ↓键一直到底部找到“LANG=zh_CN.UTF-8”这句,在 ...
- linux系统相关参数查询(内存,磁盘,CPU)
1.服务器型号:dmidecode -s system-product-name 出厂日期:dmidecode -s bios-release-date 2.磁盘大小:parted -l 3.物理内存 ...
- 记录一下前端性能优化-为何操作DOM会变慢?
对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部 使用CDN(这部分, ...
- 可爱的python
可爱的python 作者: 哲思社区出版社: 电子工业出版社 优点 1. 案列讲解很详细,前几章的内容恰好是我想要了解的,例如利用python os模块读取磁盘的文件,或者获得文字的编码方式.这些内 ...