webpack less 后不能生成一个link而是多个style标签，常见原因

最新推荐文章于 2024-07-21 11:35:06 发布
最新推荐文章于 2024-07-21 11:35:06 发布
阅读量3.2k 收藏
点赞数
分类专栏： wepack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013261261/article/details/52344288
版权


执行webpack打包后，不能压缩less成为一个独立的css文件，而是在页面中生成了多个style标签


测试多个原因后，有以下两点

1.

写法错误

test: /\.less/,
loader: extractTextPlugin.extract("style-loader！css-loader!less-loader")

要改写成下面的写法

test: /\.less/,
loader: extractTextPlugin.extract("style-loader","css-loader!less-loader")




酥麻喇蛊
关注
专栏目录
webpack基本用法
weixin_43165676的博客
12-04 965
webpack基本用法
最全18个webpack插件
weixin_49473712的博客
07-31 573
何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。 Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。 Plugin 的特点 是一个独立的模块 模块对外暴露一个 js 函数 (prototype) compiler apply apply compiler web.
webpack拆分压缩css并以link导入
c.j.h_code的博客
10-17 1067
先看一下代码文件结构： 入口文件（index1.js）内容： import $ from 'jquery' import './css/index.css' import './less/index.less' $(function () { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css('color', 'green') }) import './assets/f
webpack 打包后 首页有很多 link 标签 ，ref=prefetch 和 ref=preload
xiao_yu_liu的博客
09-20 6236
如图：vue 项目 在 webpack 打包后的 index.html ，里面会出现很多 得 link 标签， 将你的所有打包好的文件都 预加载进来 但是你并不需要，需要通过 配置 webpack 来将其去掉 <link href=css/chunk-02316de6.d6a34d41.css rel=prefetch> <link href=css/chunk-1...
Webpack 打包 less 代码
最新发布
听海边涛声
07-21 303
Webpack 打包 less 代码
webpack（二）样式文件兼容及打包
Yushia的博客
04-04 959
一、loader简介 由于Webpack打包入口目前只配置了一个index.js文件，那么其他需要被打包的文件都必须通过模块化方式引入该文件才行，而默认情况下，引入的文件必须是js文件（如上面添加的module.js）。 那么其他文件类型该如何进行打包呢？ 这时我们就要用到Webpack中所提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。 其中CSS文件的打包需要用到css-loader和style-loader两个loader css-loader
antd在HTML文件里引用,Webpack掉坑之路（2）——Antd组件引用
weixin_39958100的博客
07-20 646
注：本文部分内容来自官网，如有问题请参考如下网站1. 请先完成掉坑之路(1)的内容再进行本文内容。2. 安装antd依赖：> npm install --save-dev antd3. 安装babel-plugin-import：> npm install --save-dev babel-plugin-import4. 在根目录下创建一个.babelrc文件：//.babelrc{"...
less的简单运用
weixin_56511814的博客
03-27 1015
Less是CSS预处理器，它扩展了CSS的功能并且CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS Less的优点： 1，LESS支持创建更清洁，跨浏览器友好的CSS更快更容易 2，LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。 3，LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。 4，
【JavaScript源代码】webpack拆分压缩css并以link导入的操作步骤.docx
12-29
在现代前端开发中，Webpack 是一个非常重要的模块打包工具，它能够帮助开发者将各种资源（如 JS、CSS 文件等）打包成一个或多个 bundle 文件，从而优化前端项目的性能。本篇文章将详细介绍如何利用 Webpack 对 CSS ...
10分钟学会 webpack
阿城的博客
03-18 964
webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序。这些问题我们可以利用工具来处理，比如为了兼容就使用 Babel 转换 es6，ts 代码就使用 tsc 来转换。然后使用转换好的 js 引入 html 中。css 也一样。但是我们会发现，一个一个处理，这很麻烦，所以我们需要一个构建工具，可以帮助我们自动完成这些东西。webpack 就是一个这样的工具。
webpack中处理css文件
xYY_X_xYY的博客
08-04 1203
文章目录一、引入webpack1. 创建如下目录文件2. 打开本文件目录下的控制台，初始化项目3. 安装webpack需要的包4. 配置webpack二、 需要引入合适的依赖来让引入css文件1. 安装`css-loader`依赖，识别js文件中引入的css文件2. 在`webpack.config.js`里配置依赖3. 而这样之后，只是能识别css文件，无法识别css样式；我们需要继续引入依赖；有两种方式引入，style标签和link标签；以下分别对两种方式展开讲解三、 将css打包到页面的style标签
手把手教你webpack3（7）style-loader详细使用说明
qq20004604的博客
12-05 3746
STYLE-LOADER详细使用说明前注：文档全文请查看 根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述简单来说，style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。对于简单项目，打包然后插入也就足够了，但是遇见复杂情况，例如： 需要使用webpack
webpack5，分离css单独文件，出错
Zq
05-28 4149
以下废话可以跳过＝＝＝＝＝＝＝＝＝＝＝ 废话 begin ＝＝＝＝＝＝＝＝＝＝＝＝＝＝前段时间学习了会node，webpack。今天打算使用他做个小页面，发现以前看到的例子都是js和css打包到同一个文件里面，他有他的好处（我并不理解），但我喜欢css是css文件，js是js文件，你进来看，肯定也是希望css单独出来，可以的话留下你的想法，交流交流可好！＝＝＝＝＝＝＝＝＝＝＝ 废话 end ＝＝＝...
深入理解webpack打包机制(一)
weixin_33815613的博客
03-06 481
阅读本篇文章能给你带来什么？ 理解webpack的打包机制 手写一个简单的webpack 本文需要知道的两个npm命令 npx 和 npm linknpx:我们知道，npm5.2.0 引入了npx命令，当我们打包时 可以直接npx webpack，也可以实现打包 npm link:npm link命令可以将一个任意位置的npm包链接到...
webpack(7)_CSS_使用style-loader和css-loader
renzhongrui的博客
07-30 8074
style-loader 安装style-loader npm install style-loader --save-dev 安装css-loader npm install css-loader --save-dev
webpack——loader引入CSS样式文件
友人C君的博客
06-23 793
具体流程： 直接引入会报错 命令工具安装第三方loader加载器，cnpm i style-loader css-loader -D 在webpack.config.js配置文件中添加modulel属性，用于配置所有第三方模块加载器。 END ...
html文件中引入＜link/＞标签,webpack打包报错：document is not defined
qq_45327886的博客
03-16 2087
document is not defined html中引入link,打包
JS动态引入js,CSS——动态创建script/link/style标签
热门推荐
01-15 3万+
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "tex
生成一个webpack项目
06-01
好的，以下是生成一个webpack项目的步骤： 1. 首先，您需要在本地安装Node.js和npm。您可以在官方网站（https://nodejs.org/）上下载并安装。 2. 打开命令行终端，创建一个新的项目文件夹，例如 "my-webpack-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值