webpack加载本地css

最新推荐文章于 2024-05-02 23:09:04 发布
最新推荐文章于 2024-05-02 23:09:04 发布
阅读量1.7k 收藏
点赞数
分类专栏： webpack 文章标签： webpack vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aixinaxc/article/details/70167856
版权

     大家在使用vue过程中，会逐渐接触到webpack，他是一个打包和编译工具，同时很多人会用到vue-cli这个脚手架。在使用的过程中，你会通过css-loader来加载css文件，这个这么用网上有很多。但是在使用这个的时候还是有些东西要注意的。

     我相信有很多小白，第一次用很可能会出现以下这个错误。

     这个错误其实很可能是你css-loader的路径配置有问题，比如像我这样写。resolve('src')这样他就会报以上的错误

  


   你需要把resolve('src')这个路径改成你对应css文件的路径，但不用指导最里层。只需要对应文件夹下就行，无论里面有多少文件夹，webpack都可以自己找到。我把我需要加载的文件放到了‘src/assets/css’下。在css-loader只需要指定到'src'就行。我这里指定到的是'/src/assets'.如图：

 

 

  

aixinaxc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包css
m0_53266704的博客
06-11 2025
webpack打包1.打包css2..打包逻辑1-1.webpack打包css逻辑3.打包css4.打包成独立的css文件5.添加样式前缀6.格式校验7.压缩css8.我们为什么要用这个打包工具呢9.webpack的打包顺序10.总结 1.打包css 2…打包逻辑 1-1.webpack打包css逻辑 非js文件打包 需要对应的loader css-loader将css转化为js style-loader把包含css内容的js代码 挂载到页面的<style>标签 引入css（import
webpack css文件处理
忘川的博客
06-02 234
常见的loader 1.file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 2.url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去 3.source-map-loader：加载额外的 Source Map 文件，以方便断点调试 4.image-loader：加载并且压缩图片文件 5.babel-loader：把 ES6 转换成 ES5 6.css-loader：加载 CSS，支持模块化、压
webpack项目引用CSS、JS、图片等文件
你的小可爱的博客~
07-13 998
webpack打包时，项目中引入CSS、JS、图片不打包
webpack之解析CSS ，Less
liuhua_2323的博客
11-28 331
一、解析css 1.安装：cnpm i style-loader css-loader -D css-loader用于加载.css文件，并转换成commonjs对象(因为webpack只支持js和json语法) style-loader用于将<style>标签插入到header中 2.在src下新建index.css文件 #div{ color: red; ...
webpack超详细教程，学webpack看这一篇就够了！（上）
最新发布
共同学习，共同成长
05-02 4002
​本文将以基础到进阶的形式详细讲解webpack，包括【webpack基本概念和作用】【使用步骤】【打包、编译和压缩等相关配置】【使用webpack开发服务器】等等，由浅入深，通俗易懂，需要的小伙伴点个关注收藏一下吧！
webpack之引入css
coding...
04-27 1万+
前言：本文演示了如何打包css文件；涉及到的loader: css-loader、style-loader;css-loader的任务：把css文件作为模块打包style-loader的任务：把打包好的css文件动态的插入到html文件的&lt;style&gt;标签内正文：如何利用webpack把样式打包进我们的项目文件？在webpack的世界里，一起文件都是模块。默认webpack只会打包js...
Webpack打包工具的使用---打包引用JS和CSS文件
热门推荐
等，你的到来。
01-26 1万+
1、webpack概述：webpack是一款加载兼打包工具，它能把各种资源，例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装：在安装Webpack之前，我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。使用如下命令在全局安装webpacknpm install webpack -g3、webpack的使用步骤A...
webpack 引入未模块化的本地js / 引入Aliplayer和AliPlayerComponent
没沙发
06-09 3232
webpack引入未模块化的本地js/引入Aliplayer/AliPlayerComponent/script-loader/exports-loader
webpack-tailwindcss:在 Webpack 中使用 TailwindCSS
07-23
webpack-tailwindcss 此模板旨在帮助您基于 Webpack + TailwindCSS 启动您的项目，同时保持最佳性能实践设置，因此您不必担心基础知识。 它为您设置了一些设置，因此您不必在文档、代码拆分和 ESBuild 构建中查找...
webpack 样式加载的实现原理
08-27
CSS Modules是webpack中的一种样式加载机制，它可以将css样式限定在本地作用域中，从而避免了全局样式的污染。通过使用import引入css文件，CSS Modules可以将css样式限定在本地作用域中。 五、样式加载的实现细节 ...
windicss-webpack-plugin::leaf_fluttering_in_wind:适用于webpack的Windi CSS:high_voltage:
03-18
:leaf_fluttering_in_wind:于Webpack的下一代实用程序优先CSS框架。 特征 :puzzle_piece:按需CSS实用程序（与Tailwind CSS v2兼容） :package:按需本地元素样式重置 :fire:热模块更换（HMR） :leaf_fluttering_...
webpack-windicss-plugin::leaf_fluttering_in_wind:适用于webpack的Windi CSS:high_voltage:
03-09
:high_voltage: aka按需Tailwind CSS 特征 :high_voltage: 快速-比Webpack应用上的Tailwind快20到100倍 :puzzle_piece: 按需CSS实用程序（与Tailwind CSS v2兼容） :package: 按需本地元素样式重置 :fire: 热模块...
webpack-template:Webpack CSS模块
05-09
这通常包括Webpack本身、Webpack Dev Server（用于提供热加载和实时刷新功能）、以及处理CSS的插件和loader，如MiniCssExtractPlugin和css-loader。 2. **Webpack配置**：Webpack的核心在于其配置文件`webpack....
webpack为什么加载不了css？
weixin_30567225的博客
04-22 251
原文地址:https://segmentfault.com/q/1010000005099261 这个app是用react写的。 webpack的loader设置是这样的 module:{ loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, ...
webpack对css进行单独打包
喵大嗷的博客
03-30 1万+
** 目标：项目中所有的css文件全部打包到dist下面的css文件夹下面； ** 一、webpack对css的处理 我们都知道webpack是可以直接去处理javascript的代码，但是对于css、image、font等，是不能直接处理的，需要使用到loader将其转化成javbascript代码片，然后在对其进行处理 对于处理css，需要使用到的loader是：style-...
webpack 引入css 报错,webpack中import引入css文件就报错
weixin_39531374的博客
08-03 957
报错信息main.jsimport vue from 'vue';import vueRouter from 'vue-router';import app from './app.vue';import routes from './routes/routes.js';vue.use( vueRouter );let router = new vueRouter();router.addRout...
使用Webpack处理CSS文件
maxandcc的博客
07-27 441
同前几篇文章一样，首先需要在自己的项目目录下初始化自己的npm（命令：npm init），然后下载依赖的包(npm install webpack webpack-cli) 初始化完成后，创建配置文件（webpack.config.js），轻车熟路了哈 好了，让我们run以下试试： 这时候可以看到报错了，说的是您需要一个loader处理该类型文件，这时候就联想到之前说的：loader是处理非js文件的。所以我们需要下载loader的包。这里需要下载css-loader（n...
webpack中的css引入文件需要用~@的形式，为什么？
weixin_33994429的博客
11-21 2032
如上分别是sass-loader 和 less-loader 的官方文档，这里大体意思就是在引入文件的时候需要在前面加上~，因为~/解析到主目录。css /less/ sass没有用于导入相关文件的特殊语法。写入@import“file”与“import”./file相同所以这里添加的~实际上是为了告诉webpack这里是从根目录开始寻找，而不是相对目录。 转载于:https://juejin.i...
webpack引入css
qq_56191699的博客
12-06 975
问题：学习webpack时想要引入一个css文件，配置好css-loader和style-loader后使用命令npx webpack和npx webpack-dev-server后发现css文件没有生效，控制台报错： Refused to apply style from 'http://localhost:8082/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and st
webpack 3 入门指南：从零开始构建项目
3. **安装**：指导如何在全球或项目本地环境中安装Webpack 3，包括npm（Node Package Manager）命令和配置文件的创建。 4. **实现helloworld**：通过一个简单的例子，让读者实践Webpack的基本用法，将"Hello, World...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值