当前的位置： 捷杰建站   站长手记

SCSS提取和懒加载

站长手记 作者： 2024-08-28 07:30:01
本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

1. 准备工作
  1. {
  2. "devDependencies": {
  3. "css-loader": "^1.0.0",
  4. "extract-text-webpack-plugin": "^4.0.0-beta.0",
  5. "node-sass": "^4.9.2",
  6. "sass-loader": "^7.0.3",
  7. "style-loader": "^0.21.0",
  8. "webpack": "^4.16.0"
  9. }
  10. }
  1. // 网站默认背景色：red
  2. $bgColor: red !default;
  3. *,
  4. body {
  5. margin: 0;
  6. padding: 0;
  7. }
  8. html {
  9. background-color: $bgColor;
  10. }
  1. // 覆盖原来颜色：green
  2. html {
  3. background-color: green !important;
  4. }

2. 使用ExtractTextPlugin
  1. const path = require("path");
  2. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  4. module.exports = {
  5. entry: {
  6. app: "./src/app.js"
  7. },
  8. output: {
  9. publicPath: __dirname + "/dist/",
  10. path: path.resolve(__dirname, "dist"),
  11. filename: "[name].bundle.js",
  12. chunkFilename: "[name].chunk.js"
  13. },
  14. module: {
  15. rules: [
  16. {
  17. test: /\.scss$/,
  18. use: ExtractTextPlugin.extract({
  19. // 注意 1
  20. fallback: {
  21. loader: "style-loader"
  22. },
  23. use: [
  24. {
  25. loader: "css-loader",
  26. options: {
  27. minimize: true
  28. }
  29. },
  30. {
  31. loader: "sass-loader"
  32. }
  33. ]
  34. })
  35. }
  36. ]
  37. },
  38. plugins: [
  39. new ExtractTextPlugin({
  40. filename: "[name].min.css",
  41. allChunks: false // 注意 2
  42. })
  43. ]
  44. };

3. SCSS引用和懒加载
  1. import "style-loader/lib/addStyles";
  2. import "css-loader/lib/css-base";
  1. import "./scss/base.scss";
  3. var loaded = false;
  4. window.addEventListener("click", function() {
  5. if (!loaded) {
  6. import(/* webpackChunkName: 'style'*/ "./scss/common.scss").then(_ => {
  7. // chunk-name : style
  8. console.log("Change bg-color of html");
  9. loaded = true;
  10. });
  11. }
  12. });

4. 打包和引入
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./dist/app.min.css">
  9. </head>
  10. <body>
  11. <script src="./dist/app.bundle.js"></script>
  12. </body>
  13. </html>
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
本文链接：http://www.jiecseo.com/news/show_70002.html
SCSS 懒加载

相关新闻

Linux下DedeCMS详细安全设置教程
dedecms 上传目录路径
织梦58织梦模板加固版教程详解
加固版织梦CMS整站源码通用安装教程
织梦安装入门视频教程（织梦58莹莹主讲）
修改dede专题管理功能 自定义节点容器模板
织梦(Dedecms)文档关键词维护,文章页自动添加关键词内链锚文本
dedecms把文章批量设为未审核的办法
使用DEDE织梦计划任务功能定时更新首页

本站采用系统自动发货方式，付款后即出现下载入口，如有疑问请咨询在线客服！

售后时间：早10点 - 晚11:30点

咨询售后客服

推荐模板

推荐精华

热门标签

网站模板 企业网站模板 网站模板下载 简单大气 个人网站模板 手机网站模板 响应式网站模板 门户网站模板 下载免费网站模板 学校网站模板 网站模板免费下载 旅游网站模板 电子商务网站模板 公司网站模板 教育网站模板 外贸网站模板 政府网站模板 新闻网站模板 免费网站模板下载 导航网站模板 音乐网站模板 班级网站模板 传奇网站模板 网站 模板 php个人网站模板 html个人网站模板 个人网站模板下载 工艺品网站模板 广告公司网站模板 韩国网站模板
服务热线 19970861797
服务热线 19970861797服务热线 19970861797
售前咨询
售后客服
立即联系
售前客服
立即联系
售后服务
售后客服
立即联系
投诉电话：19970861797
手机二维码
【捷杰建站】
关于我们| 支付账号| 帮助中心| 客户服务| 售后服务| 网站地图 AI工具箱

Copyright © 2024 jiecseo.com All rights reserved.  粤ICP备18085929号

欢迎光临【捷杰建站】，本站所有资源仅供学习与参考，禁止用于商业用途或从事违法行为！

技术营运：深圳市晟艺互动传媒有限公司