【Webpack基础】处理样式（一）

已于 2022-06-06 16:46:27 修改
阅读量222 收藏
点赞数
分类专栏： # Webpack 文章标签： webpack javascript 前端
于 2022-06-01 23:55:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/125091378
版权

目录

1. 需求：修改图片大小为 200 * 200

index.html

<body>
    <h1>这是我的网页</h1>
    <div id="app">

    </div>
    <script src="./bundle.js"></script>
</body>

index.css

.logo {
    width: 200px;
    height: 200px;
}

index.js

import jspp from './jspp.jpg';
import './index.css';

const img = new Image();
img.src = jspp;
img.className += 'logo'

const app = document.getElementById('app');
app.appendChild(img);

打包报错 -> 不支持 .css 文件，需要安装对应的 Loader 处理

在这里插入图片描述

2. style-loader、css-loader

css-loader：在js中加载css

style-loader：把加载的css作为style标签内容插入到html中

2.1 安装配置

  1. 安装

    注意一定要指定安装版本，否则会报错

    yarn add css-loader@2.1.1 style-loader@1 -D

  2. 配置

    // 导入node的path模块
const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    module: {
        rules: [{
                test: /\.(jpg|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'imgs/',
                        limit: 20480
                    }
                }
            },
            {
                test: /\.css$/i,
                // loader 执行顺序：从后往前，从下往上
                use: ["style-loader", "css-loader"],
            }
        ]
    },
    output: {
        // 生成文件名
        filename: 'bundle.js',
        // 所在目录名       根目录路径  目录名
        path: path.resolve(__dirname, 'dist')
    }
}

2.2 执行顺序

从后往前，从下往上

use: ["style-loader", "css-loader"]
use: [
	"style-loader",
	"css-loader"
]

2.3 示例

logo.css

.logo {
	width: 200px;
	height: 200px;
}

.index.css

@import './logo.css'; /* css 引入 css */
body {
    background-color: #fff;
}

index.js

import './index.css'; // js 引入 css

在这里插入图片描述

3. sass-loader

编译sass文件

3.1 安装配置

  1. 安装

    yarn add sass-loader@10.0.0 sass@1.26.5 -D

  2. 配置

    module.exports = {
    ...
    module: {
        rules: [
        	...
            {
                test: /\.scss$/i,
                use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
            }
        ]
    },
    ...
}

3.2 示例

index.sass

body {
    background-color: #fff;
    img {
        width: 100px;
        height: 100px;
    }
}

index.js

import './index.scss';

未编译前：

在这里插入图片描述

编译后：

在这里插入图片描述

4. postcss-loader、autoprefixer

postcss-loader：webpack 提供的兼容 css3 样式的插件

autoprefixer：厂商前缀插件 -> 配合 postcss-loader 使用

4.1 安装配置

  1. 安装

    yarn add postcss-loader@3.0.0 autoprefixer@9.5.1 -D

  2. webpack.config.js

    注意：引入顺序

    {
    test: /\.scss$/i,
    use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
}

  3. 新建一个 postcss.config.js 文件

    module.exports = {
    plugins: [
        require('autoprefixer')
    ],
};

4.2 需求：给 css3 样式加上厂商前缀

index.scss

body {
    background-color: #fff;
    img {
        width: 100px;
        height: 100px;
        transform: rotate(45deg); /* css3 样式 -> 低版本浏览器不兼容 -> 厂商前缀 */
    }
}

如果浏览器版本足够新是不会加厂商前缀的 -> 低版本才会给你加上

在这里插入图片描述

如果要看到厂商前缀的效果，可以通过 package.json 进行配置

{
	...
	"browserslist": [
	    ">1%", // 市场份额
	    "last 2 versions" // 最新的两个版本
	],
	...
}

在这里插入图片描述

小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈webpack对样式的处理
11-28
本文介绍了webpack对样式的处理，分享给大家，具体如下： 我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 css-loader搭配style-loader 首先，我们可以引入css-loader和style-loader来处理css的解析，其中，css-loader是用来解析css文件，style-loader是用来将css文件嵌入到js文件里 var path = require('path') module.exports = { context: path.join(__d
Webpack处理样式
最新发布
lianbaiyihao的博客
09-07 324
样式处理前需要在根目录下创建文件需要建立5大核心概念。
25 webpack中处理样式
sinat_41212418的博客
12-10 468
样式处理 Webpack中需要配置相应Loade对Css代码转换成Webpack能够识别的JavaScript代码。对Css模块转换最常用的两个Loader分别是Style-loader,Css-loader，其基础配置如下： module.exports = { module: { rules: [ { test: /.css$/, use: [ 'sty
webpack对样式的处理
weixin_34248118的博客
08-26 234
原文地址：https://github.com/zhengweikeng/blog/issues/9 我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 一般来说需要引入css-loader和style-loader，其中css-loader用于解析，而style-loade...
webpack样式处理
liuqi332922337的专栏
11-14 1150
样式嵌入通过使用style-loader和css-loader,webpack可以将样式文件打包进一个js包中（javascript bundle），你可以对你的样式进行模块化，就像require(‘./stylesheets.css’);安装npm install style-loader css-loader --save-dev配置以下这个示例能使用require（）css： { /
Vue+webpack项目基础配置教程
08-28
在加载非Js文件时，我们需要在webpack.config.js文件中添加rules配置，用于识别和处理不同的文件类型。例如，我们可以添加以下配置，以便加载css和图片文件： ``` module: { rules: [ { test: /\.vue$/, loader:...
webpack基础使用,实现隔行变色效果
08-04
总结来说，这个项目是一个基础的 Webpack 使用示例，展示了如何配置 Webpack 以及使用 jQuery 实现隔行变色效果。通过学习这个项目，你可以更好地理解 Webpack 的工作原理，以及如何利用它来管理和构建前端项目。
webpack基础案例.webpack单独提取css,html
09-23
在这个"webpack基础案例.webpack单独提取css,html"中，我们将探讨如何使用Webpack配置来分别处理CSS和HTML文件，以便在项目构建过程中更好地管理和优化资源。 首先，我们要理解Webpack的基本工作流程。Webpack 通过...
浅谈webpack4 图片处理汇总
01-19
本节课会讲述 webpack4 中的图片常用的基础操作： 图片处理 和 Base64编码 图片压缩 合成雪碧图 1. 准备工作 如项目代码目录展示的那样，除了常见的 app.js 作为入口文件，我们将用到的 3 张图片放在 /src/assets...
webpack基础教程
01-12
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
webpack对脚本和样式的处理
周家大小姐
03-14 373
         对脚本的处理:    .webpack中js用什么loader加载?       1. webpack 本身就支持js的加载      2.通过Babel和presets和ES2015来加载Js通过npm install --save jquery babel-polyfill来做一个兼容性的适配,对于这两种方式都不能保证IE8的兼容性问题  ;并且loader自...
Webpack——样式处理
weixin_30783913的博客
09-15 151
1.style-loader与css-loader css-loader负责解析css相关文件。 style-loader负责在html文档中插入解析后的css文件。所以style-loader一定要在css-loader之后生效才可以写法：['style-loader', 'css-loader'](webpack解析从后向前解析) 完整配置： 1 { 2 tes...
webpack（二）样式文件兼容及打包
Yushia的博客
04-04 940
一、loader简介 由于Webpack打包入口目前只配置了一个index.js文件，那么其他需要被打包的文件都必须通过模块化方式引入该文件才行，而默认情况下，引入的文件必须是js文件（如上面添加的module.js）。 那么其他文件类型该如何进行打包呢？ 这时我们就要用到Webpack中所提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。 其中CSS文件的打包需要用到css-loader和style-loader两个loader css-loader
Webpack 库CSS文件和自己的CSS文件加载顺序问题
qq_25516459的博客
12-17 1348
记录一下遇到的一个加载顺序问题 webpack加载CSS文件的顺序是按照JS代码导入的顺序来的。 当选择器具体性一致时（例如都只用CSS类选择），后加载的CSS规则会覆盖之前的规则。 所以如果自己的CSS文件后加载，而库CSS和自己的CSS都只使用类名选择，自己的CSS规则就会被覆盖… 导入CSS文件时要注意把库所用的放在导入代码的最前面。 ...
webpack postcss-loader和autoprefixer给css3样式添加浏览器兼容
qq_30519365的博客
04-07 731
.webpack postcss-loader和autoprefixer给css3样式添加浏览器兼容 1.假设你已经熟悉webpack基本环境的搭建 npm init -y 2,创建webpack.confg.js文件 3、安装 npm i -D postcss-loader autoprefixer 4、webpack.confg.js配置 var path = require('path') var HtmlWebpackPlugin = require('html-webpack-plugin')
安装css-loader报错，怎么解决？？
FreeM_L的博客
03-03 2438
ERROR in ./src/main.js Module not found: Error: Can’t resolve ‘style-loader’ in ‘/Users/lm/Desktop/03-webpack-loader’ @ ./src/main.js 13:0-27 npm ERR! code 2 npm ERR! path /Users/lm/Desktop/03-webpack-loader npm ERR! command failed npm ERR! command sh -c w
npm ERR cb() never called npm ERR While resolving: sass-loader
吨吨吨
01-26 4056
npm ERR! cb() never called! 1 报错信息 npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report this error at: npm ERR! <https://github.com/npm/npm/issues> npm ERR! A complete log of this run can be found in: npm ERR!
webpack多版本不兼容报错
热门推荐
bugme557的博客
11-01 2万+
这里写自定义目录标题欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 根据Gitee钉钉源码 安装钉钉过程中出现多版本webpack兼容报错。 使用npm ls 时npm的树没有报错提示 随后使用npm run build打包源码出现webpack报错， 然后npm audit fix提示信息如下 su@ly050:~/Downloads/dingtalk$ npm audit fix npm ERR! code ERESOLVE npm ERR! ERESOLVE could not res
06_webpack的基础打包1
08-03
总之，Webpack是一个功能强大的前端打包工具，它能够帮助我们处理复杂的前端开发任务，实现模块化、打包优化等功能。通过使用Webpack，可以提高开发效率，优化代码性能，方便地使用各种第三方库和插件。对于前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值