vue.vonfig.js

这个文件引入mian.scss

  1. css: {
  2. // 是否使用css分离插件 ExtractTextPlugin
  3. extract: true,
  4. // 开启 CSS source maps?
  5. sourceMap: false,
  6. // css预设器配置项
  7. loaderOptions: {
  8. scss: {
  9. prependData: `@import "./src/styles/main.scss";`
  10. }
  11. }
  12. },

main.scss.凡是scss文件统统引入到mia.scss中

  1. // @import "./elementui.scss";
  2. @import "./normalize.scss";
  3.  
  4. @for $i from 1 through 110 {
  5. .margin-left-#{$i} {
  6. margin-left: (1px * $i);
  7. }
  8. }
  9. .text-overflow {
  10. text-overflow: -o-ellipsis-lastline;
  11. overflow: hidden;
  12. text-overflow: ellipsis;
  13. display: -webkit-box;
  14. -webkit-line-clamp: 2;
  15. line-clamp: 2;
  16. -webkit-box-orient: vertical;
  17. }

App.vue

一定是如下格式。 scss文件才会生效

  1. <style lang="scss">
  2. /* 不能去掉 */
  3. #app {
  4. }
  5. </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. 005_go语言中的for循环

    代码演示 package main import "fmt" func main() { i := 1 for i <= 3 { fmt.Println(i) i = i + ...

  2. webgl实现发光线框(glow wireframe)效果

    在之前这篇文章, WebGL 单通道wireframe渲染 我们介绍了webgl如何实现单通道wireframe的效果. 本篇文章就是在此技术原理基础之上,来实现发光的wireframe效果. 要实现 ...

  3. proxy的实现(代理)

    29.proxy的实现 (代理) get方法 //定义一个对象personvar person = {"name":"张三”};//创建一个代理对象pro, 代理pers ...

  4. 基于Logistic回归和sigmoid函数的分类算法推导

    此部分内容是对机器学习实战一书的第五章的数学推导,主要是对5.2节代码实现中,有一部分省去了相关的公式推导,这里进行了推导,后续会将算法进行java实现.此部分同样因为公式较多,采用手写推导,拍照记录 ...

  5. 我搭的神经网络不work该怎么办!看看这11条新手最容易犯的错误

    1. 忘了数据规范化 2. 没有检查结果 3. 忘了数据预处理 4. 忘了正则化 5. 设置了过大的批次大小 6. 使用了不适当的学习率 7. 在最后一层使用了错误的激活函数 8. 网络含有不良梯度 ...

  6. C#LeetCode刷题-栈

    栈篇 # 题名 刷题 通过率 难度 20 有效的括号 C#LeetCode刷题之#20-有效的括号(Valid Parentheses) 33.0% 简单 42 接雨水   35.6% 困难 71 简 ...

  7. java实现一个简单的爬虫小程序

    前言 前些天无意间在百度搜索了一下以前写过的博客 我啥时候在这么多不知名的网站上发表博客了???点进去一看, 内容一模一样,作者却不是我... 然后又去搜了其他篇博客,果然,基本上每篇都在别的网站上有 ...

  8. Solon Ioc 的注解对比Spring及JSR330

    注解对比 Solon 1.0.10 Spring JSR 330 @XInject * @Autowired @Inject 字段或参数注入 @XBean * @Component @Named Be ...

  9. 装机备忘录:VS Code 常用插件

    VS Code 常用插件推荐 1.基本的代码补全 2.git 扩展工具,可以看到代码的每一行 是谁修改?什么时候修改? 修改的版本号? 修改的注释? 非常好的一个工具 3.括号颜色改变工具,可以改变括 ...

  10. Mybatis-04-分页

    分页 思考:为什么要分页? 减少数据的处理量 1 使用limit分页 select * from user limit startIndex,pageSize;