webpack使用css-loader,style-loader注意

最新推荐文章于 2022-11-17 08:41:04 发布
最新推荐文章于 2022-11-17 08:41:04 发布
阅读量3.5k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris9263/article/details/78269887
版权

在使用webpack打包css文件时，在下载了css-loader、style-loader之后，仍然报错，如图：


 


解决方法：将main.js文件里的 require('./index.css'); 替换为：require('style-loader!css-loader!./index.css'); 即可。


Chris9263
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack 踩坑日志 -- 关于css-loader的报错
Leaf_Yi的博客
01-25 489
webpack 踩坑日志 问题描述 使用webpack对css管理的时候发生了错误 引用了 css-loader 引用了 style-loader 报错如下 (node:8904) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function 以下省略源文件报错位置... at... (Use `node --trace-warnings ...` to show where the w
style-loader和css-loader
xiaozhuangyumaotao的博客
06-29 812
在使用了webpack之后，给了我们两种大的选择来使用css，一种就是我们传统的方式通过 <linkhref="./public/css/users/users.css"rel="stylesheet"/> 的方式来引入，这是我们很熟悉的方式；另外，我们还可以见到下面这种写法，就是在js文件里面写到： import'./index.css'; 然后再也页面上这个index.css还生效了，这是怎么一回事呢？这跟我这次要说的style-loader和css-l...
css-loader和style-loader
qq_24871849的博客
12-01 1209
由于webpack只能处理js相关的文件，所以像图片和css资源是处理不了的，css-loader的作用是将css文件转换成webpack能够处理的资源，而style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中 案例如下： // @ts-nocheck //引入path模块，该模块提供了一些处理文件路径的一些小工具 const path = require('path'); module.exports = { //项目打包入口 entry:'./sr
webpack(7)_CSS_使用style-loader和css-loader
renzhongrui的博客
07-30 8058
style-loader 安装style-loader npm install style-loader --save-dev 安装css-loader npm install css-loader --save-dev
Webpack中css-loader和less-loader的使用教程
12-03
本文将详细介绍如何在Webpack配置中使用`css-loader`和`less-loader`。 ### 一、css-loader `css-loader`的主要功能是解析CSS文件，使其能够在JavaScript中被导入。通过`require`或`import`语句，你可以将CSS文件...
详解webpack之scss和postcss-loader的配置
08-28
本文主要介绍了Webpack中scss和postcss-loader的配置，包括postcss-loader的安装、配置和使用，scss的配置等内容。 Postcss-loader是Webpack中一个非常重要的loader，它可以将css代码转换成浏览器可以识别的格式，...
style-resources-loader：用于webpackCSS处理器资源加载器
02-04
npm i style-resources-loader -D 用法 该加载器是用于webpackCSS处理器资源加载器，它将您的样式资源（例如variables, mixins ）注入到多个导入的css, sass, scss, less, stylus模块中。 它主要用于 在所有样式...
css-loader：CSS加载器
02-05
入门首先，您需要安装css-loader ： npm install --save-dev css-loader 然后将插件添加到您的webpack配置中。 例如： file.js import css from "file.css" ; webpack.config.js module . exports = { module : { ...
Vue学习前奏—webpack
weixin_34334744的博客
10-24 93
Vue学习前奏—webpack 第一步：安装Node.js　　下载地址：http://nodejs.cn/download/　　安装就是傻瓜式的，一直下一步就可以。安装完毕后可以通过cmd输入npm -v查看是否安装成功。//node a.js 可以运行a.js　　npm（node package manage of JavaScript）作用：Node.js下载后自带npm，类似于迅雷，可以下载...
vue：webpack打包过程中的常见错误-加载CSS文件
NXBBC的博客
05-01 1400
module使用的常见问题
（14）webpack (多进程打包) thread-loader
秋来九月八
11-02 7003
多进程打包：某个任务消耗时间较长会卡顿，多进程可以同一时间干多件事，效率更高。 优点是提升打包速度，缺点是每个进程的开启和交流都会有开销（babel-loader消耗时间最久，所以使用thread-loader针对其进行优化） 下载 npm i thread-loader -D 使用 { test: /\.js$/, exclude: /node_modules/, use: [ /* thread-loader会对其后面的loader（这里是babel-loader）
Webpack 安装css-loader和style-loader报错
科技向善
12-19 5668
这个Webpack版本冲突坑太多， 安装个css-loader和style-loader也是一片祥和的红天。 分析下原因吧， 我安装css-loader和style-loader的时候直接使用了命令 $ cnpm install css-loader style-loader 导致报错 ERROR in ./node_modules/_css-loader@3.4.0@css-loader/d...
webpack5 使用Thead多进程打包提升打包构建速度
周家大小姐
11-17 801
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。多进程打包：开启电脑的多个进程同时干一件事，速度更快。
入门webpack(七）Webpack中的css-loader 和style-loader
热门推荐
TyrionJ的博客
02-13 2万+
传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。style-loader和css-loader作用是不同的。 css-loader: 加载.css文件 style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
webpack学习笔记-1-css-loader & style-loader
qq_38652603的博客
06-27 2万+
简要介绍了webpack css-loader和style-loader的使用
简单粗暴搞定webpack4的style-loader!css-loader
DreamFJ的博客
08-15 8215
改编自微信公众号：前端js动力节点。 webpack这个单词，我们可以拆开来读：web、pack。 pack是啥意思？打包，对吧？ 所以webpack的核心就是打包，将所有的资源全部打包压成一个个模块，就像酱紫滴： 我们这节课重点讲一下css的打包。 有同学就犯嘀咕了： 你说js打包我还能理解，而css打包是个什么卵？css还用打包？开什么国际玩笑？ 这种质疑不无道理。 因为...
webpack css-loader&style-loader遇到的坑
yaoshuhong43的博客
02-26 2787
今天在学习webpack，学习到css-loader和style-loader的时候，写了以下代码结果运行webpack命令之后出现以下错误。参考了一下网上一些网友的答案，都让说把这个部分删掉就可以了。。后来才发现，原来是顺序的问题。改成先style-loader再css-loader就没有问题了打包成功！...
happypack两次报错的问题
weixin_33836223的博客
07-12 813
happypack有点问题 happypack4.0.0@beta1版本以及以前的版本，并不能很好的兼容webpack2以上的版本。 这个问题并不大，但是目前来说比较影响观瞻。 这个问题实际反映在哪里呢？ 当我使用webpack3的时候，经常发现happypack报两个重复的错误。 ./static/client/js/tool/app....
webpack加载style-resources-loader使用方法
最新发布
09-02
webpack加载style-resources-loader使用方法如下： 1. 首先，确保已经在项目中安装了webpack和style-resources-loader。 ```shell npm install webpack style-resources-loader --save-dev ``` 2. 在webpack配置文件中，添加style-resources-loader的配置。 ```javascript const path = require('path'); module.exports = { // 其他配置... module: { rules: [ // 其他规则... { test: /\.scss$/, use: [ // 其他loader... 'style-loader', 'css-loader', 'sass-loader', { loader: 'style-resources-loader', options: { patterns: [ path.resolve(__dirname, '路径/到/样式资源文件1.scss'), path.resolve(__dirname, '路径/到/样式资源文件2.scss'), ], }, }, ], }, ], }, }; ``` 3. 在配置中，使用style-resources-loader的loader，将样式资源文件引入到每个需要的样式文件中。 在上面的配置中，可以看到`patterns`选项里指定了两个样式资源文件的路径，你可以根据自己的需求进行扩展或更改。注意，路径需要使用`path.resolve`方法来获取绝对路径。 例如，如果你的项目中有`styles`文件夹，并且在该文件夹下有`variables.scss`和`mixins.scss`两个样式资源文件，你可以将路径配置为： ```javascript patterns: [ path.resolve(__dirname, 'styles/variables.scss'), path.resolve(__dirname, 'styles/mixins.scss'), ], ``` 这样，在每个`.scss`文件中，你就可以直接使用这些样式资源，而无需每次都手动引入。 总结一下，通过在webpack配置文件中的module.rules中添加style-resources-loader的配置项，来一次性加载全局样式资源文件，从而简化样式文件的引入。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值