vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...

一、webpack中使用css文件：

loader是webpack中一个非常核心的概念，去转化webpack不能转化或打包的文件。

安装loader：

官网介绍：

安装： cnpm install --save-dev css-loader

loader配置：

然后再进行打包动作：npm run build

PS：css-loader只负责将css文件进行加载，所以还需要style-loader负责将样式添加到DOM中，让css文件起作用，通过cnpm install style-loader --save-dev 安装环境

// css-loader只负责将css文件进行加载

// style-loader 负责将样式添加到DOM中

// 使用多个loader时，是从右到左进行执行的

然后通过npm run build 打包，运行，测试成功：

二、webpack-less的使用

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

安装less环境：cnpm install --save-dev less-loader less

然后在webpack.config.js配置less环境：

然后重新打包，运行，测试成功：

PS：安装过程中，高版本的在打包时会报错，建议还是与其他组件配套的版本进行安装，我这边是安装了cnpm install --save-dev less-loader@4.1.0 less

三、webpack的图片使用

图片处理，需要用到url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

安装环境：cnpm install --save-dev url-loader@4.1.0

配置环境：

PS：当加载的图片大小于limit时，会将图片编译成base64字符串形式;

如果加载的图片大于limit时，则需要file-loader的环境进行加载，否则打包时会报错，此时直接安装相关环境即可，不需要配置：cnpm install --save-dev file-loader@4.1.0 。

但是通过file-loader打包的url文件，系统会去打包文件夹dist目录下找相关文件，需要指定加载图片的位置，所以在配置文件中增加一个属性：publicPath: 'dist/' //只要打包涉及到URL的文件，则自动在路径前面增加一个dist/的路径：

重新打包，测试运行成功（已经添加背景图片）：

file-loader的情况：

PS：通过file-loader打包的图片，是一个32位hash值，目的是为了防止名字重复：

为了使名字规范，可以在配置文件options进行配置，图片名字再拼接一个8位的hash值：

name: 'img/[name].[hash:8].[ext]' // 注意格式

重新打包后则生成一个原来名字拼接上一个8位hash值名字的图片：

运行后的结果：

————————————————

原文链接：

Vue学习笔记之Webpack中css、less、图片等文件处理_医疗数据-CSDN博客blog.csdn.net

vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...相关推荐

Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么？
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...
oracle12c口令文件,学习笔记:Oracle 12C ASM 新特性共享密码文件
天萃荷净测试试验ORACLE 12C ASM 新特性共享密码文件的详细过程在ORACLE 12C之前大家都知道密码文件是存放在?/dbs或者?/database中,如果要修改修改sysdba权限 ...
VUE全家桶（Vue-cli、Vue-route、Vuex）学习笔记
Es6 let 是变量 2.const 1. 是常量不能修改创建的时候一定要赋值要不报错定义的类里面的属性值可以修改 3.对象创建 1.可以先定义const name=1: Const a={ ...
前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记
web前端的定义:是面向用户(浏览者)的互联网技术统称.主要包括Web界面的结构.Web界面的外观视觉表现以及Web界面的交互实现. HTML结构语言:超文本标记语言. Web前端的分类:前端设计和前 ...
GeoServer学习笔记-2、基本使用（发布shapefile文件）
一.shapefile文件 ESRI Shapefile(shp),或简称shapefile,是美国环境系统研究所公司(ESRI)开发的一种空间数据开放格式,用于描述几何体对象:点,折线与多边形,仅仅 ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
【OpenCV】学习笔记（一）：OpenCV4.5.5文件介绍
文章目录摘要一.简介 1.计算机视觉 2.OpenCV 3.OpenCV文件夹二.build文件夹 1.bin 2.etc 3.include 4.x64 5.其他三.Source文件夹四. ...

vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...

vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...相关推荐

最新文章

热门文章