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的更多相关文章

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

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

  2. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

  3. vue初始化项目,构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  4. 在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  5. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  6. 初探angluar_01 目录结构分析及初始化项目

    简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录  用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...

  7. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  8. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  9. vue-cli3初始化项目

    1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...

随机推荐

  1. markdown公式指导手册

    #Cmd Markdown 公式指导手册 标签: Tutorial 转载于https://www.zybuluo.com/codeep/note/163962#1%E5%A6%82%E4%BD%95% ...

  2. 验证Kubernetes YAML的最佳实践和策略

    本文来自Rancher Labs Kubernetes工作负载最常见的定义是YAML格式的文件.使用YAML所面临的挑战之一是,它相当难以表达manifest文件之间的约束或关系. 如果你想检查所有部 ...

  3. 用python分析1225万条淘宝数据,终于搞清楚了我的交易行为

    大家好,我是黄同学

  4. 在Linux下安装nginx服务器详细教程

    首先安装centos的扩展源 yum install epel-release 安装Nginx 方法一: yum install nginx -y 查看版本号,开启nginx,查看进程 nginx – ...

  5. MixNet:MixConv:Mixed Depthwise Convolution kernels

  6. LInux回顾与Shell编程

    一.Linux回顾 因为要学习Hadoop大数据,会用到Linux服务器集群来做,因此有必要回顾一下当年大一所学习的Linux知识 ①Linux系统有7个运行级别(runlevel): 运行级别0:系 ...

  7. Java—构造方法及this/super/final/static关键字

    构造方法 构建创造时用的方法,即就是对象创建时要执行的方法. //构造方法的格式: 修饰符 构造方法名(参数列表) { } 构造方法的体现: 构造方法没有返回值类型.也不需要写返回值.因为它是为构建对 ...

  8. Vue Vue-loader / VueLoaderPlugin / Webpack

    在不用VueCli创建项目的时候,手写引入vue的时候,配置webpack的时候发现了这个问题 webpack vue-loader was used without the correspondin ...

  9. 设计模式:建造者模式及在jdk中的体现,建造者模式和工厂模式区别

    0.背景 建造模式(Builder模式) 假如有一个需求:盖房子,盖房子过程是一致的:打桩.砌墙.封顶.但是房子是各式各样的,最后盖出来的房子可能是高楼或别墅. 根据直接的思路,不用设计模式思想,我们 ...

  10. Linux与Windows的区别(后面了解后继续更新)

    1.转自知乎上的@Haoyuan Xing得答案: Linux是一个以开发者为中心的操作系统,Windows是以消费者为中心的操作系统.这是最根本的区别,也是Linux相对于Windows的优势/劣势 ...