文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack知识体系 - 笔记

与旧时代 —— 在 HTML 文件中维护 css 相比，这种方式会有什么优劣处？ 有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架？如何在 Webpack 接入这些工具？...Babel 与 Webpack 分别解决了什么问题？为何两者能协作到一起了？...= true 即可 PS：对工具类库，如 Lodash 有奇效 # 其他工具 缓存、SourceMap、性能监控、日志、代码压缩、分包等等 除上面提到的内容，还有哪些配置可划分为 “流程类” 配置...将 CSS 包装成类似 module.exports = “${css}” 的内容，包装后的内容符合 JavaScript 语法 style-loader：将 css 模块包进 require 语句...# 理解插件 很多知名工具，如: VS Code、Web Storm、Chrome、Firefox Babel、Webpack、Rollup、Eslint Vue、Redux、Quill、Axios 等等

1.5K20
您找到你想要的搜索结果了吗？
是的
没有找到

【CSS】470- 是时候开始用 CSS 自定义属性了

自定义属性的级联方式与 css 属性一样，而且是动态的，这意味着你可以随时更改，并且根据不同的浏览器做针对性的处理。...方法如下： // Events onMouseMove(e) { this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180;...如何使用它们 在最近的调查中， sass 依旧是开发社区中首选的 css 预处理器。 所以，我们设计一种方法，在 sass 中使用 css 的自定义属性。 1....从 sass 转到 postcss（cssnext） 从 sass 变量彻底转到 css 自定义属性变量 在 sass 中使用 css 变量，检测它是否被支持 从以上经验中，我得到了一个基本满足我需要的解决方案...你也学会了如何检测设备是否支持它，它和一般的 css 预处理器有什么不同，如何在跨浏览器支持的情况下使用原生的 css 变量。

98621

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

在过去的一年和一些人中，我一直在与 Creative Tim 合作。 我一直在使用 create-react-app 来开发一些不错的产品。...有很多客户询问如何在 Webpack 上迁移我们的产品模板。 在多次要求求之后，我们写了这个关于如何开始使用 React with Webpack 4和 Babel 7 的小教程。...此外，由于我们还没有配置该文件，我控制台中将出现一些警告。 如果我们运行如下命令： npm start webpack-dev-server 将自动启动服务器并使用该服务器打开默认浏览器。...例如我们有一个 js 文件以 es2015 的语法进行编写(如使用了箭头函数)。我们可以直接使用 babel-node es2015.js 进行执行，而不用再进行转码了。...我们需要告诉我们的脚本在 Webpack 的配置文件中，使用 import 而不是 require 语句。 否则它会给我们一个错误，它不知道import 表示什么。

9.3K60

Sass 基础(四)

当你想设置属性值的时候你可以使用字符串插入进来，另一个使用的用法是构建一个选择器。 　　　　　　...使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串， 　　　　这样方便了在混合指令 (mixin) 中引用选择器名。 　　　　...值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。 　　　　　　...乘法 　　　　Sass中的乘法运算和前面介绍的加法和减法运算略有不同，虽然他也能够支持多种单位（比如em ，px，%） 　　　　　　如：.box{ 　　　　　　　　　　width:10px *...; 　　　　} 　　除了在变量中做字符串连接运算之外，还可以直接通过 +，把字符串连接在一起。

96170

Sass-学习笔记【基础篇】

在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。 9：Sass调试 如何在浏览器中直接调试Sass文件，并找到对应的行数？...各有千秋 各有各的优点与缺点 a) Sass 中的混合宏使用 //SCSS中混合宏使用 @mixin mt($var){ 　　margin-top: $var; } .block { 　　...表格： 十、[Sass]插值(interpolation)语句#{} 既然这么麻烦还感觉比css复杂了，为什么还用这个？...但有一个例外： 在使用#{ }插值语句时，有引号字符串将被编译成无引号字符串。这样是为了方便在混合指令（mixin）中引用选择器名。  ...中的数学运算——乘法 Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。

4.8K50

如何更优雅的编写CSS代码

当然，这些框架也有一些缺点： 它经常导致平庸的设计 定制或超越css框架会很困难 在使用它们之前，你必须先学习它们 毕竟，你看这篇文章是带着目的的，对吧，所以不要在纠结框架不框架了，让我们学习如何在原生...例如：排版规则，动画特效，公共工具(这里的公共工具是指如margin-right-large, text-center,..)等等。 components: 该命名已经指明了其地位。...此文件包含用于构建页面所需的组件，如：buttons、forms、swipers、popups等等。 layout: 用于布局页面的不同部分。...将那些不依赖与你自己写的样式文件防治站该文件夹中。你可能想在这里面添加 Font Awesome 文件、Bootstrap 等等类似文件。...在你进行编码是运行npm run watch，并在浏览器中打开index.html文件，如果你想压缩你的 css 文件，使用npm run build命令 在index.html的head标签中将编译好的

1.9K10

第167期：threejs最简单的例子

同时引出几个在开发过程中容易忽略的概念，在后面的小节中将做详细的介绍。...创建立方体 虽然这个例子看起来很古老，是入门threejs必须看的例子，但是大部分文章对这个例子讲解的并非十分详细，只是简单的说明了如何在场景中添加一个物体这么一个过程，但是其中有几个值得去深入思考的问题...，下面我们一起来学习一下。...场景的宽度与高度的比率。 near , 近裁剪平面。任何比这更靠近相机的东西都是不可见的。 far , 远裁剪平面。任何比这更远离相机的东西都是不可见的。...到目前为止，我们已经可以将物体正确的展示到界面上，但是其中还有很多问题需要思考，接下来让我们一起来发现和解决这些问题吧。

21920

实战 web 应用 Docker 镜像解耦交付

本文将在个人经验的基础上，尝试以一个前端项目为案例，浅谈其面向部署时的一些固有问题，以及与 Docker 相关的部分实践。...70M+） 另外，编译过程中的依赖文件 也是没有必要包含在最终镜像中的，一般的处理如： 在 Dockerfile 中编译然后用指令语句删除一些文件 分为可复用的依赖镜像和最终打包镜像 利用 Docker...将 npm i node-sass --sass_binary_path= 语句整合进 Dockerfile 让镜像更易于交付 汇总之前分析的种种细节，来相对完整地看看如何配置镜像...多阶段构建允许我们将多个 FROM 语句放在同一个 Dockerfile 中。 每条 FROM 指令都可以使用各自不同的基础镜像。...项目局部的异步改造 配置文件很轻松的就解决了，那么有了 endpoint.json 配置文件，如何在 runtime 将其应用于每一次异步请求呢？

1.3K10

前端入门23-CSS预处理器（Less&Sass）声明正文-CSS预处理（less&Sass）

Sass 和 Less 这类语言，其实可以理解成 CSS 的超集，也就是它们是基于 CSS 原本的语法格式基础上，增加了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。...变量 通过 @变量名: 来定义变量，通过 @变量名 使用变量，其实本质上是常量了，如： @width: 10px; /*定义变量*/ @height: @width + 10px; /*使用变量，和逻辑语句...， not if((true) and (true), 1px, 0px); //逻辑与语句， and if((false) or (true), 1px, 0px); //逻辑或语句， or /...比如早期的 Sass 是通过换行和缩进如： #sidebar width: 30% background-color: #faa 这种语法格式跟 CSS 不一致，让使用者会很不习惯，Scss 之后就换成用分号和括号了...在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符合，如： @if $support-legacy { // … } @else { //

1.6K30

09-移动端开发教程-Sass入门

Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...运算 Sass支持多种数据类型的变量，比如： 数字，1, 2, 13, 10px 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz 颜色，blue, #04a3f9, rgba(255,0,0,0.5...Sass语句 Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。...但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。...所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。

2.3K90

09-移动端开发教程-Sass入门

Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...运算 Sass支持多种数据类型的变量，比如： 数字，1, 2, 13, 10px 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz 颜色，blue, #04a3f9, rgba(255,0,0,0.5...Sass语句 Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。...但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。...所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。

1.7K60

SassScss、Less 是什么？

Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如变量、嵌套、运算，混入 (Mixin)、...这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。Less 也是一种动态样式语言。...Sass 与 Less 区别图片使用：Less： https://less.bootcss.com/usage/Sass： https://www.sass.hk/docs/不同之处1、Less 在 JS...// Sass$lightColor:#baf;// Less@lightColor:#baf;3、Sass 支持条件语句，可以使用 if {} else {},for {} 循环等等。...5、同时还有 Scss 对 sass 语法进行了改良，Sass 3 就变成了 Scss (sassy css)。与原来的语法兼容，只是用 {} 取代了原来的缩进。

1K60

纯前端控件集 WijmoJS 2018V2发布，在React、Vue和Angular中更易用

与顶级组件互补的子组件，如定义FlexGrid列的wjc-flex-grid-column组件，作为它们所代表的WijmoJS 类的包装器。...目前，WijmoJS Web组件及其部件可以使用全局CSS以与普通WijmoJS控件相同的方式进行自定义。...随着新版本上线，WijmoJS 添加了Web Components In Angular示例，演示了如何在Angular应用程序中使用 WijmoJS Web组件。...其他流行框架（如React，Vue，Polymer等）的示例正在开发中。 支持SASS类型的样式 WijmoJS 的控件样式（布局，默认样式）最初是用CSS编写的。但如今，已经完成了SASS样式重写。...同时，还提供SASS源文件，以便开发者使用和自定义。 开发人员可以选择要包含在应用程序中的SASS模块。

7K20

SASS学习笔记（一）

一、为什么使用SASS CSS不是编程语言，没有变量、条件语句等等，只是单纯的描述，因此为CSS加入编程元素（即“CSS预处理器”）。...3）安装Ruby完毕后，win+r--cmd--enter 打开命令框，输入gem install sass，安装sass 4）不成功多试几次，安装成功即可使用sass了。...允许使用加减乘除算式 div{ 　　width:100px+20px; } 3）嵌套，sass可以将css中的包含选择器写成嵌套形式 3.1） 标签嵌套 css: div  h2{ 　　color:red...; } 写成sass： div{ 　　h2{ 　　　　color:red; 　　} } 3.2）属性嵌套（如border-color拆开成嵌套格式：如下）注意border后有冒号（想象成将-改成了：）...div{ 　　border：{ 　　　　color:red; 　　} } 3.3）用&引用父元素（如a:hover改成） a{ 　　&:hover{ 　　　　color:red; 　　} } 4）注释

1.4K80

Threejs入门之二十三：Threejs中的物理引擎OimoPhysics

Threejs中的OimoPhysics插件为我们提供了一个三维的物理世界，它可以帮助我们实现物理效果（如重力、弹力、加速度、摩擦力、碰撞等），并将物理世界中运动的每一帧的位置信息都映射到我们通过Threejs...下面通过一个小球下落的例子来了解下OimoPhysics插件引入OimoPhysics插件OimoPhysics插件位于three.js—examples—jsm—physics路径下，使用时需要先引入该插件...camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight)})// 初始化渲染器...ball.position.set(0,2,0) scene.add(ball) }调用初始化物体函数// 初始化物体initMeshes()此时运行浏览器，发现我们创建的小球已经出现在了浏览器上 使用...THREE.ShadowMaterial({color:0x111111}) //影子的颜色 ) floor.position.set(0,-1,0) scene.add(floor)在enablePhysics中将地面也加入到物理引擎中

2.3K20

武装你的小程序——开发流程指南

工程化方案选型 对于目前常用的工程化方案，webpack，rollup，parcel等来看，都常用与单页应用的打包和处理，而小程序天生是 “多页应用” 并且存在一些特定的配置。...解决import导入问题 那如何解决import的导入问题呢，其实也比较简单，说白了就是sass处理的时候，让其不处理import部分的语句就可以了。...有两种方式可以做到，第一种是改写sass处理的源码，当遇到import语句时跳过。...第二种是，在把文件交给sass处理前，我们先把import语句部分注释掉，这样sass处理的时候就会忽略了，当sass处理完成后，再把注释掉的语句打开即可。...因此我们单独配置了sass变量和函数存放的位置，这样我们在打包的时候，遇到这样的import语句，我们就跳过，交给sass处理，否则就代表其是引入了共用的样式文件，这样我们交给sass处理前，就先将其注释掉

3.9K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券