webpack 打包成功了, 但 CSS 出错, 不起作用是什么原因? 怎么解决下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
问题: webpack 打包成功, 但是 CSS 出错, 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: [
- ]
- };
更多 Web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17706.html