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 ...
随机推荐
- C++ Json工具--Jsoncpp用法简介
文章目录 Json简介 用法简介 数据类型 C++代码示例 代码执行输出结果 JSON在线解析及格式化验证 - JSON.cn Json简介 JSON(JavaScript Object Notati ...
- 一张图理清 Python3 所有知识点
如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起.很多人学习python,掌握了基 ...
- 【Canal】数据同步的终极解决方案,阿里巴巴开源的Canal框架当之无愧!!
写在前面 在当今互联网行业,尤其是现在分布式.微服务开发环境下,为了提高搜索效率,以及搜索的精准度,会大量使用Redis.Memcached等NoSQL数据库,也会使用大量的Solr.Elastics ...
- 提前批笔试一道算法题的Java实现
题目描述 这是2021广联达校招提前批笔试算法题之一. 我们希望一个序列中的元素是各不相同的,但是理想和显示往往是有差距的.现在给出一个序列A,其中难免有相同的元素,现在提供了一种变化方式,使得经过若 ...
- ES6语法学习(一)-let和const
1.let 和 const 变量提升: 在声明变量或者函数时,被声明的变量和函数会被提升到函数最顶部: 但是如果声明的变量或者函数被初始化了,则会失去变量提升: 示例代码: param2 = &quo ...
- 在Linux使用虚拟环境
定义 “虚拟环境”,是python解释器的一个私有副本.在这个环境中,你可以安装私有包,而且不会影响系统中安装的全局python解释器. 作用 为每个程序单独创建虚拟环境时,可以保证程序只能访问虚拟环 ...
- Spring Boot 教程 - 文件上传下载
在日常的开发工作中,基本上每个项目都会有各种文件的上传和下载,大多数文件都是excel文件,操作excel的JavaAPI我用的是apache的POI进行操作的,POI我之后会专门讲到.此次我们不讲如 ...
- MacOS抓包工具Charles
抓包工具有wireshark, tcpdump, 还有就是Charles. 今天分享的是最后一个Charles.抓包分2个, 一个是移动端的,一个是macOS自带的应用. 安装Charles http ...
- 基于vue的实时视频流开发
背景:多个实时视频的介入 技术:hls.js的流媒体,支持格式已m3u8为主 解决了什么:多个实时视频长时间播放会有卡顿的情况 具体代码实现: import Hls from 'hls.js' pla ...
- 用C++基础语句写一个五子棋游戏
(这是一个颜色会变化的呦) #include <iostream> using namespace std; int b[][]; int n; int m; void qipan() { ...