scss

1. WebStorm 按两下空格输入 soft wrap 进行换行 2. 第一个坑: svg 中的 fill 属性处理 svg 里面如果有 fill="",就会有颜色，可以手动去除,但是如果有很多个 svg 那么一个个去很麻烦 用 svgo-loader 解决这个问题，在 vue.config.js 中配置 config.module .use('svgo-loader').loader('svgo-loader') .tap(options=>({ ...options, plugins:[{ removeAttrs:{attrs:'fill'} }] }) ) .end() 安装方法 yarn add svgo-loader -D 3. 碰到问题安装包和 node 版本不匹配 The engine "node" is incompatible with this module. Expected version "^8.16.0 || ^10.6.0 || >=11.0.0". Got "8.12.0" 解决办法用 nvm 安装 10 版本的,升级办法参考:https://dev.to/peterwitham/install-and-update-nodejs-on-the-mac-with-nvm-1m9j nvm install 10 4. 提交修改 点 Version

一、 vue中的v-show和v-if是做什么用的，两者区别是什么 v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。 二、 让css只在当前组件生效 <style scoped> </style> 三. 让scss、stylus在当前组件生效 scss ： 1.下载 npm install sass-loader node-sass --save 2. <style lang='scss' scoped> 3. scss 样式穿透 父元素 /deep/ 子元素 <style scoped lang='scss'> .swiper-pagination /deep/ .swiper-pagination-bullet-active{ background:pink; } </style> stylus : 1.

Gulp 是Web开发中帮你自动完成任务的工具。它可以完成的前端任务包括： 启动Web Server 当文件修改保存后，自动刷新浏览器 批量处理Sass或者Less文件 优化资源CSS, JavaScript, 和 images 安装Gulp -g 参数表示全局安装 $ npm install gulp -g 创建Gulp项目 创建一个名为 demo 的目录( 目录名不能用gulp ），在目录下运行 npm init npm init 会在项目下创建一个 package.json 文件，以保存项目相关信息，如项目名，项目依赖包等。 安装gulp依赖包到项目中 $ npm install gulp --save-dev 这次我们只是把gulp安装到项目目录，而不是全局。 --save-dev 会增加开发依赖(dev dependency)配置到 package.json 项目文件结构 Gulp允许你用任务文件结构来构建项目，但是在使用前你最好理解Gulp的内部原理。 本教程使用通用的webapp文件结构 app是开发目录 ，我们的代码就放在这个目录下。 dist （distribution的缩写）是存放发行目录，存放优化后的文件 gulpfile.js 是gulp的配置文件 创建gulp任务 使用gulp的第一步是在 gulpfile.js 中 require gulp. var

根据我的阅读， Sass 是一种语言，它通过变量和数学支持使 CSS 更加强大。 SCSS有什么区别？ 是否应该使用相同的语言？ 类似？ 不同？ #1楼 基本区别是语法。 尽管SASS的语法宽松，带有空格，没有分号，但SCSS更类似于CSS。 #2楼 在萨斯 .sass 文件是从视觉上不同 .scss 文件，例如： Example.sass-sass是较旧的语法 $color: red =my-border($color) border: 1px solid $color body background: $color +my-border(green) Example.scss-sassy css是Sass 3以来的新语法 $color: red; @mixin my-border($color) { border: 1px solid $color; } body { background: $color; @include my-border(green); } 只需将扩展名从 .css 更改为 .scss 任何有效的CSS文档都可以转换为Sassy CSS（SCSS）。 #3楼 Sass是第一个，语法有点不同。 例如，包括一个混合： Sass: +mixinname() Scss: @include mixinname() Sass忽略花括号和分号，而是放在嵌套上

npm install sass-loader@7.3.1 --save-dev（安装高版本的会报错 这个耗费了我一个小时） npm install node-sass --sava-dev npm install sass-resources-loader --save-dev 删掉 因为新版本的vue-cli已经帮我们把sass-loader配置好了，不然你要是在main.js引入scss会报错 main.js 并不能在vue里面使用 用下面的方法可以使用 npm install sass-resources-loader --save-dev 加上这段代码 就可以使用了 全局scss了， 网上百度的挺多的，大部分都比较凌乱 心累 来源： CSDN 作者： 猿计划 链接： https://blog.csdn.net/qq_39351190/article/details/103808851

如何让scss变量能够当做js变量来使用 当前我们使用scss变量有两个痛点： 需要手动导入 无法与js建立联系或者很难，后续不能在此基础上做一些骚操作 为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。 scss变量使用规范 变量创建 所有scss变量在 style/variables.scss.js 编写，格式要求为： 只允许使用小写字母 单词间以下划线"_"连接 命名应简洁易懂，以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾 const variables = { 'header_height': '60px', 'header_background': `#ededed` } module.exports = variables; 注意：命名以下划线连接是为了在js文件中能够单个import, 使用中已经在webpack进行转换，必须按照此格式！ 在scss变量中使用是正常的scss变量： $header-height 在js中使用是定义时的变量格式： import { header_height } from "@/style/variables.scss.js"; 变量使用 配置webpack中sass解析方式，一般来说项目构建者已经处理完毕

1. 安装 npm install node-sass --save-dev npm install sass-loader --save-dev 2. 用法 2.1 嵌套 #div { img{ width: 200px; } } //编译为 #div img { width: 200px; } 2.2 变量 $color: #000; #div{ background:$color; } // 编译后 #div{ background: #000; } 2.3 @mixin混合器 @mixin divSyle($color: #000) { background:$color; } #div{ @include divSyle() } // 编译为 #div{ position: relative; background: #000; } 2.4 @extend继承 .div1 { border: 1px solid #111; } .div2 { @extend .div1 ; background: #000; } //编译后 .div1 , div2 { border: 1px solid #111; } .div2 { background: #000; } 2.5 用&添加hover的伪类 #div{ p{ &:hover { color: red; } } } /

第一次报错信息： error in ./src/assets/styles/app.scss Module build failed: @import "./reset.scss"; ^ Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("' in /Users/aa/demo/new/src/assets/styles/app.scss (line 1, column 1) @ ./src/modules/a/index.js 9:0-34 @ multi (webpack)-dev-server/client?http://localhost:8086 webpack/hot/dev-server ./src/modules/a/index.js 处理步骤： 　　将webpack.base.config.js scss配置 原代码为： { test: /\.scss$/, loader: 'sass-loader!style-loader!css-loader', } 改为： { test: /\.scss$/, use:[ 'style-loader', 'css-loader', { loader: 'sass-loader', options: {

什么是语法糖 “语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。” scss是sass的一个升级版本 sass是靠缩进表示嵌套关系，scss是花括号。 SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。 来源： CSDN 作者： 孩子不懒 链接： https://blog.csdn.net/qq_26386437/article/details/103995984

项目开发问题汇总 一、scss和css区别 scss——“工具样式” 1、scss优点 样式嵌套 div { color：red; p { font-size:10px; } } 2、安装方式 (1) 安装 npm i sass sass-loader -D //安装 //简写方式 -D <=> --save-dev -S <=> save (2) 工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader... npm i --save-dev <packname> (3) 项目（运行时、发布到生产环境时）依赖；例：antd , element,react... npm i --save <packname> (4) 对应关系如下 （至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给其他看你项目的人带来误解、可能会导致一些bug的出现，还有一些配置的错乱等） 二、问题汇总 来源： https://www.cnblogs.com/maizilili/p/12190290.html