Webpack中打包Vue文件时分离less整合到一个单独文件中

最新推荐文章于 2023-08-06 03:17:03 发布

原创最新推荐文章于 2023-08-06 03:17:03 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在使用Vue结合Webpack进行项目打包时，若在.vue文件中使用<style lang=less>，所有样式会被内联到HTML的<style>标签中，而非独立成文件。移除lang属性即可解决。

最近写vue项目使用webpack打包的时候发现了一个坑，附上一张自己的每个插件的版本图

在vue文件中写样式的时候如果使用<style lang="less">，则会把所有的样式以内联在网页的<style>打包,而不会整合到单独的文件。删除lang="less"则可以正常打包

这是我webpack config的内容

附一个完整的可跑的vue工程demogit地址

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yc_Blog

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

webpack5从零搭建一个项目

阵雨的博客

12-06

3297

目录一、初始化项目1. 新建webpackdemo目录，初始化npm2. 安装webpack包3. 创建配置webpack.config.js和入口main.js4. 安装插件html-webpack-plugin5.引用css6.为css添加浏览器前缀7.把css样式从js文件中提取到单独的css文件中8. babel转义js文件9. 图片、音频、字体文件处理10.完整配置代码二、区分开发环境和生产环境1.热更新配置2.区分开发环境与生产环境的关系。3.定义环境变量三、持续优化1.打包文件分析工具webp

webpack css/less分离

qq_28500793的博客

04-19

498

webpack css/less分离 webpack css分离需要借助extract-text-webpack-plugin这个插件 //插件 plugins:[ new ExtractTextWebpackPlugin("css/styles.css"), ] //配置 { test: /\.less$/, use: ExtractTextWebpackPlugin.extr...

参与评论您还未登录，请先登录后发表或查看评论

vue里引用less，并且less单独成一个文件引入

weixin_41798613的博客

06-22

2034

vue里引用less有好几种用法，有引入后在vue文件里style标签里的写法，也有module的写法。本文讲的是module的写法，其本质就是css module，并且将less文件单独成一个文件引入。安装 less 与依赖 npm install less less-loader --save-dev 配置在webpack.base.conf.js中，配置 const ExtractTextPlugin = require("extract-text-webpack-plugin"); const

Webpack 提取样式打包成单独的css文件并做css兼容性处理以及压缩css

专注前端技术，包括Web端、移动端、小程序、APP

06-20

2006

在之前的webpack配置文件中，打包之后，css样式都是存在打包后的js文件的当中，且以字符串的形式存在。这样不利于我们对css兼容各浏览器的处理等操作。所以，我们必须将打包的css独立出来一个单独的文件。独立css文件配置需要用到一个插件：mini-css-extract-plugin npm i mini-css-extract-plugin -D 接着我们在webpack.config.js的最上方引入此插件： const MiniCssExtractPlugin = require('min

webpack5：自动清除上次打包文件（将path整个目录清除）

jieweiwujie的博客

09-28

171

clean: true,

vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用

tenc1239的博客

08-06

1812

【代码】vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用。

vue项目中webpack打包配置webpack.prod.js文件中的common设置的是什么

最新发布

11-14

- 引用[1]: 讨论了webpack打包vue-cli项目，特别是webpack.prod.conf.js文件。它提到使用webpack-merge来整合base和prod文件。 - 引用[2]: 详细介绍了webpack.prod.conf.js配置文件，包括OptimizeCssAssetsPlugin...

深入理解Vue单文件组件与Webpack的协同：高效工作流的构建之道

[深入理解Vue单文件组件与Webpack的协同：高效工作流的构建之道](https://img-blog.csdnimg.cn/20210719135637186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9...

Vue中实现前端模块化开发：Webpack5模块配置的深度解析

[Vue中实现前端模块化开发：Webpack5模块配置的深度解析](https://opengraph.githubassets.com/7c16484dc6c181ba2c1e744bd301cbc91782d169fcd071e7b220065a80dfd6d9/webpack/webpack/issues/16660) # 1. 前端模块化...

基于Vue的开箱即用中后台管理框架

vue-element-admin 是一个基于 Vue + Element UI 的经典中后台前端解决方案，拥有庞大的社区基础和成熟的插件体系。因此，此框架很可能继承了其优秀的架构设计，如模块化的路由配置、动态权限控制系统、多环境变量...

前端选型（VUE+Webpack+Less）

07-17

前端选型文档主要针对之前的开发模式JQ+css+SVN 跟VUE+webpack+less+git的一个对比

vue单独文件书写CSS样式-使用less书写VUE CSS样式

书写人生

06-17

1265

安装及使用步骤如下： npm install less-loader@4.1.0 --save 常见版本比较低报错：Module build failed: TypeError: loaderContext.getResolve is not a function 请更新最新版本即可安装及使用步骤如下： 1、安装【npm install less-loader@4.1.0 --save】 2、在【build】文件下的【webpack.base.conf.js】文件中【rules】中加入 .

Vue学习18-----webpack打包处理css文件

小虾米的成长之路

01-08

608

1、新建css文件 li{ list-style: none; } 2、引入css样式、运行 import'./css/ys.css' 3、运行后报错 4、执行 npm i style-loader css-loader 5、配置webpack.config.js const path = require('path'); const HtmlWebp...

VUE学习笔记：17.模块化开发之webpack打包less文件

ouyicnm的博客

06-16

966

1.使用webpack打包less文件步骤实际上在项目中，常用的样式文件不是css，而是使用less、scss或者stylus等来定义样式。那么如果要对这些文件打包应该如何处理呢？我们以打包less文件为例：（1）前期准备第一步：安装loader 安装less less是npm的第三方包，如果要把less文件转化为css文件，需要依赖less包。 npm install less@3.9.0 --save-dev 安装less-loader less-loader：用于使用webpack.

Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件

Sunny_lxm的博客

01-31

2124

Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件

webpack打包vue项目进行打包优化

^_^

08-08

4326

一、理解打包当项目上线后，用户不可能页通过localhost:8080访问我们的页面，只能把项目放到服务器中，才能提供给用户访问，所以vue-cli内部集成的webpack，把vue、less、js等打包成浏览器可直接执行的代码。二、进行打包打包命令 num run build 输入完命令后会在项目的根目录创建一个dist目录这个目录里面就是我们打包后的结果。 dist目录下才是浏览器认识的代码，之前可以运行是通过脚手架工具提供给我们的否则浏览器是不认识.vue文件。 js文...

vue组件库合并样式打包成less文件

肖晗的博客

07-31

1997

基于公司需求，会搭建一个常规的组件ui库，简单的组件库还是非常好搭建的，我也搭建了很多次了，美滋滋的去搭建了，局部组件、公共组件，巴拉巴拉一顿输出。在于antdesign经常会自己设置主题，我们的组件库需要支持antdesign中的变量继承，看到antdesign在main.js中可以直接，我是比较好奇的，但是还是真没在组件库做过。开始想到的是用webpack或者gulp进行打包成less，在于本人技术实在尴尬，网上也搜不到对应的东西。后面想想，干脆自己用fshttpshttpshttps。...

Vue组件打包发布——css文件单独打包

做GIS梦的人

06-19

5377

前言在打包自己vue组建时，遇到一个问题，项目内的css文件无法单独打包出去。看到其他人的项目，都是install之后，可以引入一下js，引入一个css文件，就可以使用了。这块自己也研究了一下，如何vue组件项目中样式单独打包出一个css文件。实现方式主要是使用 extract-text-webpack-plugin 这个插件实现，但是如果你是webpack4以上版本，只能考虑使用 mini-css-extract-plugin 这个插件，具体使用方法类似。这里我的webpack是 3.6.0 版

Vue课程15-了解loader的调用过程

geyaoisnice的博客

05-29

299

const path=require('path') // 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // 2. new 构造函数，创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 fi.

Vue2工程模板：webpack2打包与iView集成配置详解

本文档主要介绍了如何构建一个基于Vue.js 2、Vue-Router以及webpack 2的Vue工程模板，并提供了GitHub仓库链接，以便开发者可以直接获取和学习。在该模板中，webpack被用来进行打包和模块管理，确保项目结构清晰，...