当我将未压缩的scss或css导入js文件时，我得到了空的样式标签。 - 腾讯云开发者社区

sass包； components ├─lib | ├─demo | | └index.vue ├─css | └demo.scss 在示例文件夹得 main.js 中导入并申明组件： import...，ADM，UMD 了，下面来介绍一下各自的特点； CommonJs：文件作用域：每个文件即为一个单独的模块，模块中的内容未主动暴露则对外不可见；缓存：模块的加载只发生在第一次导入，在之后的导入会优先读取缓存...需要用到的模块如下： gulp-sass，因版本问题需要额外导入 sass 模块。 gulp-minify-css：主要用来对 css 文件进行压缩。...(sass()) .pipe(minifyCSS()) .pipe(gulp.dest("dist/css")); }); 复制代码将模块化的 scss 文件整合到一起，方便全部加载：...在 css 目录新建 index.scss 文件，并将各个组件需要的 scss 文件导入到此文件。

1.2K2 0

基于Vue、ElementUI的换肤解决方案

我们单独写一份样式表（css 文件深空蓝.css），以一个特定的命名开头（比如 .blue-theme），然后在这个 css 文件中，完成我们第二套皮肤的样式代码，然后当我们点击换肤的时候，就将 blue-theme...image.png 当我们这里点击深空蓝的时候，将 class science-blue 添加到 body 上，点击青铜绿的时候，就将 science-blue 去掉，因为我们默认的就是青铜绿。...（你可以将这个css 文件改成你喜欢的名字，比如我改成了叫：theme-summer.css） image.png 然后在我们项目的 main.js 中，注释掉 Element-UI 的原来 css 文件引入...image.png 我们看一下这个工具生成的，或者配置页面导出的这个 css 文件，混淆压缩的代码，手动给每一个样式外面包裹一个 class 来做命名空间是不现实的，所以这里要用到一个 gulp 插件...那么你 js 改 scss 变量的方法在打包后的项目中是不起作用的。

5.4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

css模块化及CSS Modules使用详解

近期在项目中大量使用，下面具体分享下实践中的细节和想法。 CSS 模块化遇到了哪些问题？ CSS 模块化重要的是要解决好两个问题：CSS 样式的导入和导出。...代码压缩不彻底由于移动端网络的不确定性，现在对 CSS 压缩已经到了变态的程度。很多压缩工具为了节省一个字节会把 '16px' 转成 '1pc'。...幸运的是，CSS Modules 这点做的很好：如果我对一个元素使用多个 class 呢？没问题，样式照样生效。如何我在一个 style 文件中使用同名 class 呢？...没问题，这些同名 class 编译后虽然可能是随机码，但仍是同名的。如果我在 style 文件中使用了 id 选择器，伪类，标签选择器等呢？...如何与全局样式共存前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的局部样式和谐共存。

6.9K10 0

第九十二期：css 的source map , sass 的调试和sass指令

在代码编译的时候我们需要检查代码中的错误，并且在不同的设备上做测试。 css source maps 大多数sass项目把不同来源的文件合并到一个css文件中去。并且这个css文件通常会被压缩。...当我们从浏览器检查这个css的源文件时，我们有时候无法找到相关的css代码。这个情况我们经常遇到。解决这个问题，我们可以使用css 的source map。它可以回溯到未打包前的状态。...sass --watch sass:css 我们修改scss文件中的样式，浏览器中html的样式也会相应的进行更新，需要我们手动刷新页面。...当我们开启 watch 模式后，当source map 更新后，文件变更后会保存到我们的本地文件中，watchers监听到变化后会重新编译css。浏览器自动读取编译后的样式文件，理论上就是这么简单。...但是测试驱动在css中怎么使用呢？样式风格是我们的选择之一。我们在scss文件中修改样式，使所有的用户界面符合我们的要求。

6251 0

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

当我们的页面变卡、页面占用的内存逐渐上升最后OOM时，我们有考虑过，如果不用这些框架，是不是这类问题更容易被发现，更容易被控制呢？...困扎代码发布之前，各个组件的代码会被困扎到一起，产出很多个chunk文件，tree-shake会帮我们移除没用到的代码热更新或热重载的能力改了某个组件的代码，能实时看到改动后的结果，如果达不到热更新...要写一个工具才才能提升我们使用这个方案的开发体验，比如把template、css样式和代码文件封装到一个单独的组件中搞定这个工具没那么容易，而且搞不好又回到了老路上，等于自己开发了一个前端框架，...注意：这个组件中没有使用任何React对象的方法，也得导入React对象，而且必须叫React对象，不然esbuild不认。...scss 隔离样式假设我们约定一个组件的根元素有一个父样式，这个父样式约束着这个组件的所有子元素得样式那就可以用下面的代码，让组件的样式作用于组件内，不污染全局样式 //ViewDay.scss

2354 0

【Webpack】319- Webpack4 入门手册（共 18 章）（上）

文件，使得能在 js 文件中引入使用； style-loader ：用于将 css 文件注入到 index.html 中的标签上； 2....require、 define的调用，或任何其他导入机制，忽略的 library 可以提高构建效率。...postcss-import 让我们可以在 @import CSS文件的时 webpack 能监听并编译。...样式代码都是写到 index.html 的标签中，这样样式代码多了以后，很不方便。...main.css"> 六、 webpack 压缩 CSS 和 JS 为了缩小打包后包的体积，我们经常做优化的时候，将 CSS 和 JS 文件进行压缩，这里需要使用到不同的插件。

1.8K4 0

webpack入门——webpack的安装与使用

$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本...，导致未压缩脚本变得很大）四、模块引入一....我们再看看编译前的页面入口文件（index.js）： require('../../css/reset.scss'); //加载初始化样式 require('../...../css/allComponent.scss'); //加载组件样式 var React = require('react'); var AppWrap = require('.....独立打包样式文件有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以标签引入。

1.4K8 0

【Cute-Webpack】Webpack4 入门手册（共 18 章）

css 文件，使得能在 js 文件中引入使用； style-loader ：用于将 css 文件注入到 index.html 中的标签上； 2....、require、define的调用，或任何其他导入机制，忽略的 library 可以提高构建效率。...precss 类似 scss 语法，如果我们只需要使用嵌套，就可以用它替换 scss。 postcss-import 让我们可以在@import CSS文件的时 webpack 能监听并编译。...在之前学习中，CSS 样式代码都是写到 index.html 的标签中，这样样式代码多了以后，很不方便。..." href="main.css"> 六、 webpack 压缩 CSS 和 JS 为了缩小打包后包的体积，我们经常做优化的时候，将 CSS 和 JS 文件进行压缩，这里需要使用到不同的插件。

2.3K3 1

大作！webpack详细配置

，否则会报错小tip：如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象在导出的函数中能够读取到没有被导出的值 //index.js文件 let num = 10; let...test和use的对象，这样就很清晰了 3.打包处理scss文件这一部分内容我是没有成功的，查了很多资料都没有成功，视频课程讲解的webpack版本是4.x，我用的是5.x，有些东西被弃用了，安装不成功...limit= 8 * 1024" } 注意： css样式表中的文件才会通过这个插件被打包 ?..." } 性能优化配置使用HMR优化打包构建速度 HMR对html，css，js都有不同的配置，js，和html文件默认是不使用HMR功能的问题：如果我们只是修改了样式文件，没有被修改过的js等文件也会因为页面的刷新而被重新加载一次...// 新配置要想生效，必须重新webpack服务 // 重新执行npx webpack server指令 hot: true } HMR功能开启后当我们修改样式文件，我们在控制台上可以发现此时只有该样式文件被重新加载刷新了

1.7K2 0

如何更优雅的编写CSS代码

很多程序员都不想从事 CSS 开发—我可以做任何事情，除了css以外。当我在编写app时，css是我最不喜欢的部分，但你又不能逃避它，对吗？...SCSS是css的预处理器。基本上，它是CSS的超集：它添加了一些很酷的特性，比如：变量、嵌套、导入和混合。我会略将下我们马上要使用的特性。变量在scss中你可以使用变量。主要好处：可重用性。...使用嵌套可以使你花费更少的时间来编写复杂的css选择器。分块和导入当涉及到可维护性和可读性上时，不可能将所有的代码都保存在一个大文件中。...SCSS 到 CSS 为了做到这一步，网我们需要 Node.js 和 NPM(或者Yarn) 我们将使用一个名为 node-sass的包，它允许我们将 .scss文件编译为 .css文件。...在你进行编码是运行npm run watch，并在浏览器中打开index.html文件，如果你想压缩你的 css 文件，使用npm run build命令在index.html的head标签中将编译好的

1.9K1 0

Webpack前世今生

并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。...3.和grunt/gulp的对比 grunt/gulp的核心是Task，我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css），之后让grunt...但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue...7.1CSS loader 项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。在src目录中，创建一个css文件，其中创建一个normal.css文件。...我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。normal.css中的代码非常简单，就是将body设置为red但是，这个时候normal.css中的样式会生效吗？

9023 0

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

CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。..."/> js/lib/less.js"> HTML 文档通过 link 标签引入 less 文件时，需要将 link 标签的 rel...文件加载成功后就会去将 less 转成 css 标准样式，在标签后面才用 link 标签引入的那些 less 文件就无法被转换了。...，将 main.less 文件编译输出 main.css；还有其他高级的用法，比如顺便压缩 css 文件，输出 .min.css 文件等等。...或 scss.bat 这种方式下，每次配置的文件变动时，会自动生成对应的 css 文件，转换工作会自动实时进行。

1.6K3 0

10分钟学会前端工程化（webpack5.0）

(1)、代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 (2)、文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。...（使用配置文件） 2.2.1、创建一个项目或目录创建一个空项目或一个空目录，不一定需要使用IDE,这里我使用WebStorm 2.2.2、初始化项目 npm init -y (-y直接跳过提问阶段)...在应用于图标字体，或将 CSS 动画应用于 SVG 时非常有用。...加载和转译 SASS/SCSS 文件）加载sass或scss文件并转译成css 用css-loader或raw-loader 转换成一个JS模块或用ExtractTextPlugin插件将样式分隔成一个单独文件.../file1.txt'; //导入样式文件 //import '../css/baseCss.css' //导入预处理样式文件 import '..

3.1K1 0

Vite该如何使用？Vite学习笔记，持续记录

build.cssCodeSplit，启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时插入。...Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS....官方文档 https://vitejs.cn/config/#css-modules 6.导入全局的scss、less样式 export default defineConfig({ plugins...因为现在的前端开发都是模块化、组件化的方式,在上线前对 js 和 css 文件进行合并压缩容易造成混淆。...10.build.cssCodeSplit 默认： true，启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时插入。

4.2K2 0

React组件设计实践总结03 - 样式的管理

但对于无组织的 CSS 效果不会太大解决的方向: 如果样式的依赖比较明确，则可以安全地移除无用代码 4️⃣ 压缩选择器和类名的压缩可以减少文件的体积, 提高加载的性能....因为原生 CSS 一般有开发者由配置类名(在 html 或 js 动态指定), 所以工具很难对类名进行控制. 压缩类名也会降低代码的可读性, 变得难以调试....解决的方向: 由工具来转换或创建类名 5️⃣ 常量共享常规的 CSS 很难做到在样式和 JS 之间共享变量, 例如自定义主题色, 通常通过内联样式来部分实现这种需求解决的方向: CSS-in-js...特性: 比较轻量, 不需要 JS 运行时, 因为他在编译阶段进行计算所有样式默认都是 local, 通过导入模块方式可以导入这些生成的类名可以和 CSS proprocessor 配合采用非标准的语法...而在 React 生态中使用svgr更加方便, 它可以将 svg 文件转换为 React 组件, 也就是一个普通的 JS 模块, 它有以下优势: 转换为普通 JS 文件, 方便代码分割和异步加载相比

7.1K2 0

怎样才能写出更好的 CSS

最后你把所有代码都扔到文件末尾，因为你根本不在乎，CSS 烂透了。结果你得到了 500 行根本无法维护的 CSS 代码。 ? 烂透了我本人经常和 CSS 苦苦纠缠。...在实验或构建小型应用时，这种做法尚且可行，但是到了专业的级别……想都不要想。很幸运的是，有了 SCSS 后，我们依然可以继续沿用这种做法。...你必须遵守以下两条规则：将所有内容分别写入7个不同的文件夹中。将它们全部导入位于根级别的 main.scss 文件中。仅此而已。 7 个文件夹： base：你可以将所有的样板代码放入该文件夹中。...这是我们的最后一步，我们现在就来学习如何将SCSS编译为CSS。 4. 从 SCSS 到 CSS 首先，你需要 Node.js 和 NPM（或 Yarn）。...... } 现在当你运行 npm run build 时，可以生成经过压缩的 CSS 代码，并且添加了提供商前缀！

1.7K1 0

在HTTP2中管理CSS和JS

是的，这些都是在标签内部. 但是，不要紧张，在规范中并没说不让这样用。对于每个小的标签块，你的样式可以拆分为只包含对应的CSS。...global 文件夹这个文件夹是我在每个页面都有用到的CSS。适用于网站的头部，底部，重置，字体，和其他通用样式。 ? index.scss如下所示: @import ".....modules 文件夹在我们的HTTP/2设置中这是最重要的文件夹。当我拆分样式到对应的模块，这个文件夹会包含非常非常多的文件。所以一个子文件夹就是一个模块： ?...当我安装完成后，我只需要把它添加到Blendid的task-config.js文件中。...-%} 当我想要引入一个模块的CSS文件夹，只需要这样： `{{ macros.css('/modules/image-block') }}` 这让我在处理站点中的样式关系更简单点。

3.5K3 0

Vue webpack的基本使用

image-20200302232307631 3.2 在index.html编写 li 标签，稍后在 main.js 编写样式为了更好演示压缩 js、css的示例，下面先来编写一个 ul 无序列表，...image-20200302213441391 3.2.2 main.js 中导入 jquery，并且编写样式 main.js代码： // 这是 main.js 是我们项目的JS入口文件 // 1\....image-20200303082840795 3.4.4 配置以打补丁生成压缩文件的热更新模式 --hot 目前每当我们修改一下main.js中的代码，都是完整生成一个新的bundle.js，如下：...文件前面都是只在打包js文件，那么如何打包压缩css文件呢？...image-20200304073543478 ul li{ list-style: none; } 3.7.2 将index.css样式直接引入index.html，确认一下样式效果 ?

1.5K2 0

多端多页面项目Webpack打包实践与优化

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。...css loader用来处理js文件中引入的css模块（处理@import和url()）， style-loader是将 css-loader打包好的css代码以标签的形式插入到html...当你的index.scss里@import了其他scss文件比如a.scss时，如果a.scss里使用了url(),且里面的路径是相对路径，那么在sass-loader 处理过后给css-loader处理时就会报错...但是这个办法有个问题，那就是 resolve-url-loader不识别scss文件的行内注释语法，即 // 注释，这个问题使得接入一些已存在的公共样式库时会存在问题，目前还在研究是否有其他loader...注意：当这里的publicPath和output的publicPath同时设置时，这里的优先级更高 3、配置分离通常，我们本地开发环境和生产环境会采用不同的配置文件，发布上线时，我们会对资源进行压缩、

1.9K3 0

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

} 复制代码还有一个问题，由于tree-shaking是基于import 和export的，当我们用import引入css文件时，是没有导出的，所以我们需要配置忽略css文件的tree-shaking...的作用：但是我们看dist目录下的js文件，发现jquery和业务代码都打包进一个页面了，这样会导致当业务复杂时，整个页面代码会非常大，我们进一步做优化，即js代码分割。...此时执行npm run build,我们可以看到代码已经进行了分割：当然只满足与css和js的打包还远远不够，我们项目中还会用到各种图片，字体图标，css预编译语言如less或者scss，由于这部分的安装比较简单...中添加一下配置： // 导入模块 // 压缩css const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin...未完成的优化点： vue文件内部style无法独立抽出样式，只能通过引入css文件的方式加载样式公用css文件问题：多页面打包时，如果都引入了同一个css，无法服用这个css，希望能将这个css文件作为一个公共模块单独引用

2.3K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何搭建组件库的最小原型

基于Vue、ElementUI的换肤解决方案

css模块化及CSS Modules使用详解

第九十二期：css 的source map , sass 的调试和sass指令

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

【Webpack】319- Webpack4 入门手册（共 18 章）（上）

webpack入门——webpack的安装与使用

【Cute-Webpack】Webpack4 入门手册（共 18 章）

大作！webpack详细配置

如何更优雅的编写CSS代码

Webpack前世今生

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

10分钟学会前端工程化（webpack5.0）

Vite该如何使用？Vite学习笔记，持续记录

React组件设计实践总结03 - 样式的管理

怎样才能写出更好的 CSS

在HTTP2中管理CSS和JS

Vue webpack的基本使用

多端多页面项目Webpack打包实践与优化

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐