Webpack

Pass webpack (environment) variable to scss file

由 拜拜、爱过 提交于 2020-12-13 17:51:11
问题 Very new to webpack... I would like to be able to read a value, in this case specifically the value of env from webpack.config.js in a sass file, so I can have different css based on environment. For example: env = development, colour = green env = production, colour = blue So far I have focoused on sass-loader, trying to pass data, but has not worked, the $env variable is always undefined when i run npm run build:Debug (this runs webpack --app=all --env=development ). These are the files I

2年前端，不懂源码怎么办？

由 白昼怎懂夜的黑 提交于 2020-12-13 12:47:52
Vue 3.0 beta版的更新，再次成为行业热门话题，几乎所有人都在聊 Vue 源码，说它很重要。但真正掌握了多少，还得经常问问自己。 下面这些题目，你能回答出来几个 ： 编写高效的 CSS 应该注意什么？ GET和POST的区别？ vue数据绑定原理是什么？ 介绍一下 vue-router 原理？ v-if 和 v-show 的区别？ 使用箭头函数应该注意什么？ promise构造函数是同步执行还是异步执行？ ... 开课吧 为大家提供了一套《前端进阶手册》，包括面试高薪指南、一个Vue实战项目和webpack的构建原理等来多角度全面提升个人技能。 01《高薪面试这样答》 通过列举不同薪资等级的前端开发在面对同一问题时分别有哪些回答，并提供参考回答，来帮助大家快速排坑，掌握套路。 1、关于面试题-总观点 反对没事就刷题 需建立核心知识体系 2、关于文件上传的不同等级回答 菜鸟 10K 15K 20K 25K 30K 35K ... 3、其他知识点 虚拟dom fiber vue模版编译 ... 02《Ts+Vue项目最佳实践》 typescript 在 vue 项目的该如何应用？有哪些需要注意的点？ 1、Vue +ts 开发环境准备 安装插件 设置 ... 2、ts核心语言特性 3、组件编写 4、路由声明 5、全局状态管理 6、数据请求 7、第三方模块 ... 03

【JS】395-重温基础：事件

由 空扰寡人 提交于 2020-12-13 10:43:16
本文是 重温基础 系列文章的第二十篇。 这是第三个基础系列的第一篇，欢迎持续关注呀！ 重温基础 系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】(http://js.pingan8787.com)的JavaScript基础系列中。 今日感受：电影有时候看的是缘分。 本章节复习的是JS中的事件，事件冒泡捕获代理模拟等等。 前置知识： JavaScript与HTML的交互式通过 事件 来实现的，是文档或浏览器窗口中发生的一些特定的交互瞬间。 1.事件流 事件流描述的是从页面中接收事件的顺序，通常有这样两种完全相反的事件流概念： 事件冒泡流 （IE团队提出）和 事件捕获流 （网景团队提出）。 1.1 事件冒泡 冒泡事件（Event Bubbling）：事件开始时由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐层向上传播到较为不具体的节点（文档），看下示例代码： <!DOCTYPE html> <html> <head> <title> leo 事件冒泡 </title> </head> <body> <div id = "leo" > 点击 </div> </body> </html> 点击页面中 <div> 元素，这个 click 事件就会按照下面顺序传播： <div> <body> <html> document 由此可见

DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-12-13 08:46:15
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpack等工具输出多套主题样式 页面加载后，根据用户需求加载不同的样式列表 推荐阅读《 webpack 换肤功能多主题/配色样式打包解决方案 》，配置文件： https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo/blob/master/webpack.config.js 这里是以less 为例，sass 配置，稍微修改即可，这里就不做赘述了，google应该都可以搜索得到，推荐这篇也是顺手搜的 这种方式在bootstrap时代就流行开来，那时候还用过php编译less，以及java编译：java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css webpack

TypeError: Duplicate declaration, Module build failed Error in Typescript Project [closed]

由 筅森魡賤 提交于 2020-12-13 03:42:04
问题 Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed last month . Improve this question Good Day, I have code something like below In A.ts file: declare class LayerManager { //code constructor(factory: Factory); //code } let self: LayerManager; function LayerManager(factory: Factory) { //code self = this; //code } export default LayerManager; In B

TypeError: Duplicate declaration, Module build failed Error in Typescript Project [closed]

由 妖精的绣舞 提交于 2020-12-13 03:39:05
问题 Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed last month . Improve this question Good Day, I have code something like below In A.ts file: declare class LayerManager { //code constructor(factory: Factory); //code } let self: LayerManager; function LayerManager(factory: Factory) { //code self = this; //code } export default LayerManager; In B

TypeError: Duplicate declaration, Module build failed Error in Typescript Project [closed]

由 白昼怎懂夜的黑 提交于 2020-12-13 03:38:08
问题 Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed last month . Improve this question Good Day, I have code something like below In A.ts file: declare class LayerManager { //code constructor(factory: Factory); //code } let self: LayerManager; function LayerManager(factory: Factory) { //code self = this; //code } export default LayerManager; In B

vue 路由懒加载

由 霸气de小男生 提交于 2020-12-12 18:32:04
题外： 我司目前的后台管理网站依旧是 jq + xxUI 构成的 ，早就想把 丫儿 个换成 vue了， 苦于整个组几乎一致处于一个忙碌的状态，没有时间来重构。 然鹅，昨天今天组长找到我说要用 vue 搞起来，这个问题不大，毕竟之前用他完成了几个项目，颇有收获，教训满满。 看着 左侧 冗长菜单 item ，不禁陷入了沉思。 当打包构建应用时，Javascript 包会变得非常大，首次加载即便使用了 各种 LOADING ，各种 动画，肯定体验贼差， 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 路由懒加载 于是想到了 vue 路由懒加载 这个路子， vue-router 支持WebPack内置的异步模块加载系统，只需要在路由被访问时按需加载。 嗯，搞个 demo 出来先。 1 初始化一个项目，建立三个页面，分别绑定路由 import Vue from 'vue' import Router from 'vue-router' import home from '@/components/home' import icon from '@/components/icon' import progress from '@/components/progress' Vue.use(Router) export default

跨域 webpack + vue-cil 中 proxyTable 处理跨域

由 ＊爱你＆永不变心＊ 提交于 2020-12-12 15:00:19
博客地址： https://ainyi.com/27 跨域 了解同源政策：所谓"同源"指的是"三个相同"。 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点：只能get请求 ，需要修改B网站的代码 cors 这个方案缺点 是 ie6 7 兼容不好（倒是不见得要兼容）。需要B网站在响应中加头 postMessage 缺点也是 ie6 7 兼容不好（倒是不见得要兼容）。需要修改B网站的代码 iframe window.name 传值得方式很巧妙，兼容性也很好。但是也是需要你能修改B网站代码 服务端主动请求B网站，兼容性好而且你客户端的代码还是原来的ajax，缺点是感觉不好。（服务器端是不存在跨域安全限制的） 类似5 用nginx把B网站的数据url反向代理。 node， express 解决跨域 加上请求头： 1 app.all('*', (req, res, next)=> { 2 res.header("Access-Control-Allow-Origin", "*" ); 3 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With" ); 4 res.header("Access-Control

How can I configure Storybook.js Webpack to work with absolute image paths in CSS modules in a Next.js project?

由 醉酒当歌 提交于 2020-12-12 11:25:07
问题 I am trying to configure Storybook to work with Next.js, Ant Design, Less, and TypeScript. In Next.js, images have to be stored in the public/ folder and referenced with absolute paths to be used throughout the project. I am having trouble configuring the Storybook.js webpack to be able to resolve these absolute image paths. For example, in a CSS module I could have: .testImage { background-image: url('/images/cucumber.png'); background-repeat: no-repeat; background-size: contain; height:
订阅 Webpack