问题: webpack 打包成功,但是css不起作用

问题分析/解决: 原因有以下几种

  • 使用了webpack2的语法规则不正确; webpack2要求必须写-loader;
  • 可能是只写了css-loader,没有写style-loader;
  • 顺序反了,必须写成 style-loader!css-loader;

扩展

  1. 问: 如果没写style-loader或者没写css-loader会怎么样; 
    答: 
      没写style-loader则build文件会生成,但你会发现页面中js不起作用; 
      没写css-loader则会直接报错:’You may need an appropriate loader to handle this file type.’
  2. 问: style-loadercss-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不起作用的更多相关文章

  1. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  2. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  3. webpack 打包js和css

    首先进行全局安装webpack npm install -g webpackcmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack接着需要packj ...

  4. 关于webpack打包js和css

    废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...

  5. 走近webpack(4)--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

  6. webpack打包学习

    从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...

  7. 走近webpack(2)--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

  8. 使用webpack打包css和js

    1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...

  9. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

随机推荐

  1. Linux i2c子系统(一) _动手写一个i2c设备驱动

    i2c总线是一种十分常见的板级总线,本文以linux3.14.0为参考, 讨论Linux中的i2c驱动模型并利用这个模型写一个mpu6050的驱动, 最后在应用层将mpu6050中的原始数据读取出来 ...

  2. Spring 3.0 Aop 入门

    关于Aop的原理,动态代理,反射,之类的底层java技术网上搜一堆一堆的..我就不多说了,主要说在spring上使用aop的方法. 首先不得不说一下的就是,spring aop的支持需要外部依赖包: ...

  3. .NET MD5加密解密代码

    MD5简介: 是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是MD2.MD4还是MD5,它们都需要获 ...

  4. Ionic2开发笔记(2)创建子页面及其应用

    1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml      这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...

  5. TypeScript设计模式之中介者、观察者

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  6. js数据类型:引用和5种基本数据类型

    javascript有2种基本数据类型:引用和基本数据类型 基本数据类型又有5个分类:布尔型.字符串.数值.undefined.NULL.

  7. web从入门开始(2)----基础

    HTML文件结构 <html> <head>//网页头标记 <title>放置标题</title> </head> <body> ...

  8. [原创]HBase学习笔记(3)- Java程序访问HBase

    这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...

  9. [笔记]LR和SVM的相同和不同

    之前一篇博客中介绍了Logistics Regression的理论原理:http://www.cnblogs.com/bentuwuying/p/6616680.html. 在大大小小的面试过程中,经 ...

  10. linux之date命令详解

    date命令的用处 1.用于显示特殊的时间格式,可以用于对日志文件的命名 2.用于设置时间 ,不过这方面用的比较少,因为一般的服务器都设置的有自动同步网络时间 用法: date [OPTION]... ...