webpack 打包成功,但是css不起作用
问题: webpack 打包成功,但是css不起作用
问题分析/解决: 原因有以下几种
- 使用了webpack2的语法规则不正确; webpack2要求必须写
-loader
; - 可能是只写了css-loader,没有写style-loader;
- 顺序反了,必须写成
style-loader!css-loader
;
扩展:
- 问: 如果没写
style-loader
或者没写css-loader
会怎么样;
答:
没写style-loader
则build文件会生成,但你会发现页面中js不起作用;
没写css-loader
则会直接报错:’You may need an appropriate loader to handle this file type.’ - 问:
style-loader
和css-loader
的作用是什么?
答:
style-loader
只是没起作用而不报错就意味着它的作用是将样式插入到DOM元素中;结合网上的答案以及观察预览页面发现:style-loader会在页面的header
标签里生成内部的<style></style>
;
css-loader
会报错,是因为它影响到webpack的build的过程了。结合网上分享以及’You may need an appropriate loader to handle this file type.’报错信息,意味着css-loader的存在使得在js中通过require
或者import
引入css成功;通过css-loader,可以实现在js文件中通过require的方式,来引入css。
我的配置文件
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
'bundle': './a.js',
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
chunkFilename: '[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.js[x]?$/,
exclude: 'node_modules/',
loader: 'babel-loader'
}
]
},
plugins: [
]
};
webpack 打包成功,但是css不起作用的更多相关文章
- vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...
- webpack打包js,css和图片
1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...
- webpack 打包js和css
首先进行全局安装webpack npm install -g webpackcmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack接着需要packj ...
- 关于webpack打包js和css
废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...
- 走近webpack(4)--css相关拓展
我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...
- webpack打包学习
从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...
- 走近webpack(2)--css打包及压缩js
前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...
- 使用webpack打包css和js
1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...
- webpack打包css
1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...
随机推荐
- Linux i2c子系统(一) _动手写一个i2c设备驱动
i2c总线是一种十分常见的板级总线,本文以linux3.14.0为参考, 讨论Linux中的i2c驱动模型并利用这个模型写一个mpu6050的驱动, 最后在应用层将mpu6050中的原始数据读取出来 ...
- Spring 3.0 Aop 入门
关于Aop的原理,动态代理,反射,之类的底层java技术网上搜一堆一堆的..我就不多说了,主要说在spring上使用aop的方法. 首先不得不说一下的就是,spring aop的支持需要外部依赖包: ...
- .NET MD5加密解密代码
MD5简介: 是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是MD2.MD4还是MD5,它们都需要获 ...
- Ionic2开发笔记(2)创建子页面及其应用
1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...
- TypeScript设计模式之中介者、观察者
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- js数据类型:引用和5种基本数据类型
javascript有2种基本数据类型:引用和基本数据类型 基本数据类型又有5个分类:布尔型.字符串.数值.undefined.NULL.
- web从入门开始(2)----基础
HTML文件结构 <html> <head>//网页头标记 <title>放置标题</title> </head> <body> ...
- [原创]HBase学习笔记(3)- Java程序访问HBase
这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...
- [笔记]LR和SVM的相同和不同
之前一篇博客中介绍了Logistics Regression的理论原理:http://www.cnblogs.com/bentuwuying/p/6616680.html. 在大大小小的面试过程中,经 ...
- linux之date命令详解
date命令的用处 1.用于显示特殊的时间格式,可以用于对日志文件的命名 2.用于设置时间 ,不过这方面用的比较少,因为一般的服务器都设置的有自动同步网络时间 用法: date [OPTION]... ...