Sass

Babel 是一个通用的多功能 JavaScript 编译器，但与一般编译器不同的是它只是把同种语言的高版本规则转换为低版本规则，而不是输出另一种低级机器可识别的代码，并且在依赖不同的拓展插件下可用于不同形式的静态分析。（静态分析：指在不需要执行代码的前提下对代码进行分析以及相应处理的一个过程，主要应用于语法检查、编译、代码高亮、代码转换、优化、压缩等等） 安装babel //打开终端，输入命令 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node //安装完毕之后，再次输入命令安装 npm install --save @babel/polyfill 创建babel.config.js const presets = [ ["@babel/env",{ targets:{ //最低支持的浏览器版本 edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] export导出/暴露 //export default默认导出，即外部JS文件import（引入）后可以使用的属性 // export default只能到处一次 export default { //属性 a, //方法 show } //按需要暴露（导出）

如何让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解析方式，一般来说项目构建者已经处理完毕

前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽，像链接也是用这样的方式，例如 // 地址: github的地址 https://github.com/wangjeaf/ckstyle-node 那为什么变量名不用小写字母加小划线的方式，如：family_tree，而是推荐用驼峰式的familyTree？C语言就喜欢用这种方式命名变量，但是由于因为下划线比较难敲(shift + -)，所以一般用驼峰式命名变量的居多。 引入CSS文件的link可以不用带type=“text/css”，如下代码： <link rel="stylesheet" href="test.css"> 因为link里面最重要的是rel这个属性，可以不要type，但是不能没有rel。 JS也是同样道理，可以不用type，如下代码： <script src="test.js"></script> 没有兼容性问题。 属性书写顺序 属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。但是如果顺序保持一致的话，扫一眼可以很快地知道这个选择器有什么类型的属性影响了它，所以一般要把比较重要的属性放前面。比较建议的顺序是这样的： 你可能会觉得我平时差不多就是这么写的，那么说明你有一个比较好的素养。并且我觉得规则不是死，有时候可以灵活

项目中有全局的less、scss文件时，我们的模块使用时，需要引入才能使用，有没有办法只引入一次，或者把它配置在webpack里呢？这篇文章讲到的就是create-react-app（16.8.X）版本的使用方法。sass-resources-loader和style-resources-loader，这两个模块。以下是配置方法 1.使用的版本 react：16.8.6 webpack：4.29.6 2.先安装style-resources-loader和sass-resources-loader，找到 config文件下的webpack.config.js（npm run eject） 2.1 sass-resources-loaders使用方法，不废话了，直接贴代码。 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, modules: true, // css-module localIdentName: "[name]-[local]-[hash:base64:5]", // css-module hash sourceMap: isEnvProduction && shouldUseSourceMap // 是否map }, "sass-loader"

随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！ 那么对于零基础的一个学员该怎么学习前端呢？ 工具篇 工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。 WebStorm 不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。 Google 在使用「Google」之前必须学会***，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。 Github 全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧

我想在容器div中对齐3个div，如下所示： [[LEFT] [CENTER] [RIGHT]] 容器div的宽度为100％（未设置宽度），调整容器大小后，居中div应该保持居中。 所以我设置： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} 但它变成： [[LEFT] [CENTER] ] [RIGHT] 有小费吗？ #1楼 如果您不想更改HTML结构，也可以通过添加 text-align: center; 包装器元素和 display: inline-block; 到居中元素。 #container { width:100%; text-align:center; } #left { float:left; width:100px; } #center { display: inline-block; margin:0 auto; width:100px; } #right { float:right; width:100px; } 现场演示： http ： //jsfiddle.net/CH9K8/ #2楼 这是当我以 图像 为中心元素时必须对接受的答案进行的更改：

步骤: 安装依赖：npm i browser-sync --save-dev 导入browser-sync,通过create创建 设置Sass和Js任务，将其压缩重命名并引入页面，任务结束时reload服务 设置默认任务，此任务负责，初始化服务器，监视setJs和setCss的变化 var gulp = require("gulp"); var browser = require("browser-sync").create(); var concat = require("gulp-concat"); var rename = require("gulp-rename"); var sass = require("gulp-sass"); var minifyCss = require("gulp-minify-css"); var uglify = require("gulp-uglify"); gulp.task("setJs",()=>{ gulp.src("./src/js/*.js") .pipe(concat("c.js")) .pipe(uglify()) .pipe(rename("c.min.js")) .pipe(gulp.dest("./dist")) .on("end",browser.reload); }); gulp.task("setSass",()

1、package.json，package-lock.json恢复到SVN版本； 2、删除node_modules文件 3、npm install 4、npm rebuild node-sass / npm install node-sass 5、npm update 6、npm run dev 来源： CSDN 作者： 云轻0613 链接： https://blog.csdn.net/u013798317/article/details/104511520