Webpack bootstrap.css npm模块ExtractTextLoader + css_loader解析失败
Webpack是一个现代化的前端构建工具，它可以将多个模块打包成一个或多个最终的静态资源文件。它的主要作用是解决前端开发中模块化、依赖管理、资源优化等问题。
bootstrap.css是Bootstrap框架的CSS样式文件，Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和JavaScript组件，可以快速构建响应式的网页。
npm是Node.js的包管理工具，它允许开发者在项目中安装、管理和共享JavaScript模块。
ExtractTextLoader是一个Webpack插件，用于将CSS样式从打包后的JavaScript文件中提取出来，生成独立的CSS文件。
css_loader是Webpack的一个加载器，用于解析CSS文件并将其转换为JavaScript模块。
解析失败可能是由于以下原因导致的：
- 配置错误：在Webpack配置文件中，可能没有正确配置ExtractTextLoader和css_loader，导致解析失败。可以检查配置文件中的相关配置项，确保正确配置。
- 依赖缺失：可能缺少必要的依赖包，比如ExtractTextLoader和css_loader的依赖包没有安装或版本不兼容。可以通过npm安装最新版本的相关依赖包，或者检查依赖包的版本兼容性。
- CSS语法错误：bootstrap.css文件中可能存在语法错误，导致解析失败。可以使用CSS语法检查工具检查并修复语法错误。
对于这个问题，可以尝试以下解决方法：
- 确认Webpack配置：检查Webpack配置文件中是否正确配置了ExtractTextLoader和css_loader。可以参考Webpack官方文档或相关教程进行配置。
- 检查依赖包：使用npm检查并更新相关依赖包，确保ExtractTextLoader和css_loader的依赖包已正确安装，并且版本兼容。
- 检查CSS语法：使用CSS语法检查工具，如CSSLint或Stylelint，检查bootstrap.css文件中是否存在语法错误，并进行修复。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云Webpack部署指南：https://cloud.tencent.com/document/product/1214/53947
- 腾讯云CSS样式管理服务：https://cloud.tencent.com/product/csm
- 腾讯云前端开发工具：https://cloud.tencent.com/product/fed
相关·内容
3回答
Webpack在使用npm链接时给出了eslint错误
javascript、npm、eslint、npm-link
我设置了一个多包项目，其中有一个依赖于TypeScript库的JavaScript包。最初，我安装了Sinopia，并在每次对其进行更改时重新安装库。然后我看到了npm link，并认为它会更容易开发。不幸的是，当我链接库(使用npm link ../typescript-package)并构建时，它给出了一个错误：
ERROR in ../typescript-package/dist/index.js
Module build failed: Error: No ESLint configuration found.
由于它们是单独的包，我不太确定为什么Webpack要将eslint应用到
浏览 0提问于2018-01-24得票数 15
5回答
使用腾讯云作服务器，如何添加npm包？
云服务器、官方文档、access、小程序·云开发
我的小程序是用来处理excel的，使用腾讯云作服务器，excel的处理在服务器端进行，需要安装一下node依赖包，要如何安装？我现在本地安装了，在package.json中添加了相关依赖，之后上传并勾选自动安装依赖，但服务器不能完成安装并报错：
{"code":-1,"reason":"npm WARN checkPermissions Missing write access to /data/release/node-weapp-demo/node_modules/exit-on-epipe npm WARN checkPermissions Mis
浏览 1124提问于2018-04-18
1回答
“拉威尔”中NPM、作曲家和Bower的区别？
php、node.js、laravel-5、npm、composer-php
因此，在拉勒维尔，有Composer，NPM和Bower，我知道他们都是脱产经理。
Composer --这似乎集中在composer.json依赖项上，并且包清单是由composer.json的内容控制的。要安装软件包，可以添加到此文件中，也可以运行php composer install <package>。
NPM --这似乎集中在JavaScript依赖项上，但也有大量的包。npm install安装的包由package.json文件的内容指定。
Bower -据我所知，这是前端包吗？
在Laravel中，如果您愿意的话，可以使用这三种方法，但是在库可以通过npm和comp
浏览 0提问于2018-05-14得票数 7
回答已采纳
2回答
使用NPM安装Bootstrap
npm、bootstrap-4
我知道如何使用npm来安装和维护构建工具，但我意识到我不确定如何利用它来安装框架(css或js，我通常只会在我的index.html中使用脚本/css链接)。
但是，假设我想使用npm。我会运行一个npm install bootstrap和npm install jquery，但是我不确定下一步是什么。
然后我可以直接说<link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css">，但这似乎很笨拙和愚蠢。
我看到很多
浏览 1提问于2018-06-27得票数 6
1回答
没有nodejs，webpack还能跑吗？
javascript、webpack、frontend
一些旧的JavaScript库，如jQuery/RequireJS，只是一个js文件，你可以很容易地在HTML中使用它。
然而，现在Webpack和其他JavaScript框架/库必须由npm安装并在Node.js中运行。
我想知道没有Node.js，Webpack能不能跑。我问这个问题是因为我想做一些特别的事情，例如在.NET核心中甚至在HTML语言中使用Webpack。
有可能吗？
浏览 13提问于2018-02-17得票数 2
回答已采纳
1回答
在与webpack的react上导入引导
twitter-bootstrap、reactjs、webpack、css-loader
我尝试在我的react项目中导入bootstrap，但它不起作用。首先，我有这个错误
ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\wamp\www\project\node_modules\bootstrap\dist\css\bootstrap.css Line 9: Unexpected token :
You may need an appropriate loader to handle this file type.
| html
| {
| font-family: sans-s
浏览 0提问于2016-02-10得票数 2
1回答
导入本地npm包时出错
javascript、npm、webpack、vue.js
我们有几个网站，每个都在自己的项目中，我们希望将它们全部迁移到使用Vue.js。每个网站都有自己的目录与.vue文件，然后捆绑使用Webpack。我们有一个Webpack配置在适当的地方，转换.vue文件，捆绑包，lints和管道，所有通过babel，它工作得很好。
然而，现在我们已经转移了几个星期，我们注意到有几个组件和核心javascript文件非常相似，理想情况下，我们希望将它们提取到vue组件和函数的共享库中。
我们已经将几个.vue与网站一起提取到一个文件夹中，并将它们作为一个基本的npm模块与它自己的package.json放在一起，并使用npm文件包含它们，所以在package.
浏览 1提问于2018-08-14得票数 0
回答已采纳
1回答
模块Vue需要什么NPM依赖项？
javascript、node.js、web、vue.js、npm
我对HTML + JS库中使用SSR开发的传统多页面应用程序有一定的了解，但我对现代web开发还很陌生。我目前正在学习Vue JS (最新版本)，我已经在网上观看了一些教程视频。我看过的视频教我用普通的HTML + <script>设置来编写Vue JS网页，而不是用Vue CLI程序创建的项目设置。
现在，我想知道package.json文件中的NPM依赖项需要哪些才能将项目设置从单个HTML + Vue CDN脚本src更改为由vue-cli设置的文件夹结构，就像其他CLI创建的现代项目文件夹结构一样，例如角和响应。
运行vue init <template name&g
浏览 0提问于2019-04-28得票数 1
2回答
在多个项目之间共享node_modules目录
javascript、java、npm、npm-install、node-modules
我是一个学习EC6的java开发人员。我使用npm下载JavaScript包，使用webpack创建最终的bundle.js文件。
我有一个很好的项目文件夹，其中包含带有java文件的java模块，我想将EC6 JavaScript文件添加到我的web模块中。我使用maven来管理java依赖库。
这是我的文件夹结构：
my-project
|-common-module
|-ejb-module
|-web-module-1
| |-src
| |-main
| |-java
| |-com.a.b
浏览 14提问于2016-12-31得票数 6
回答已采纳
1回答
腾讯云COS跨域问题？
对象存储、vue.js、html、access、http
有没有大佬遇到过，前端 vue 下载腾讯云 文件， 有些文件可以正常下载，有些文件却报跨域问题？有没有大佬遇到过？
提示 这个
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
浏览 895提问于2020-09-07
3回答
如何在webpack node_modules应用程序中导入CSS
css、angular、typescript、npm、webpack
假设我们从以下初学者包开始：
在npm install和npm run start之后，一切都很好。
我想添加一个外部css模块，例如引导4的css (只有css)。(我知道引导程序有一个引导加载程序，但是现在我要求提供一般的解决方案，所以请在这里考虑引导4，因为它可能是通过npm提供的任何其他css模块)。
我通过npm：npm install bootstrap@4.0.0-alpha.4 --save安装引导程序
首先，我认为将import 'bootstrap/dist/css/bootstrap.css';添加到vendor.browser.ts文件就足够了。
但事实
浏览 7提问于2016-10-16得票数 72
回答已采纳
3回答
如何与webpack捆绑同构的commonJS代码
javascript、webpack、commonjs、isomorphic-javascript
我有一个使用nodeJS模块格式(commonJS)的项目，也应该(在部分中)在浏览器中运行。
我确实有非同构的代码路径，其中我有条件地包含模块：
var impl;
try {
// in node, use node-impl
impl = require('../node-impl');
} catch (err) {
// running in browser, use browser-impl
impl = require('../browser-impl');
}
现在，我想使用webpack创建一个在浏览器中运行的包。
浏览 1提问于2016-02-03得票数 2
2回答
如何在maven模块之间共享javascript代码
javascript、maven、npm、webpack
我的maven项目有以下结构：
"base“模块--包含共享java文件--应该包含共享javascript文件。
模块1 --使用共享java文件作为maven依赖项--应该使用共享javascript文件吗？
模块2 --使用共享java文件作为maven依赖项--应该使用共享javascript文件吗？
目前，webpack似乎是javascript包装中的新事物，npm似乎是一个合适的包管理人员。因此，我尝试了以下方法：-基本模块使用webpack创建一个npm包(带有npm包)-模块1和2使用指向npm包所在的基本模块目标文件夹的相对路径手动安装此包。
为
浏览 1提问于2016-01-09得票数 5
回答已采纳
1回答
React-工具箱主题错误
reactjs、npm、react-toolbox
我从react-toolbox网站复制了基本的按钮实现，它似乎在react-toolbox主题中给出了一个错误。请查看错误的屏幕截图。
我的index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';
ReactDOM.render(
<Button label="Hello World!" />,
浏览 2提问于2017-03-09得票数 0
5回答
如何在react和类型记录npm包中包含css文件
css、typescript、bundle
我正在创建一系列组件，以便在我工作的公司中重用。我们使用类型记录，到目前为止，我可以正确地创建组件，从transpile到javascript，并发布到npm。我只使用命令行tsc，我不使用webpack。我的问题依赖于使用css文件的特定组件。当我运行安装npm包的实际应用程序时，它会抛出一个错误：
./~/my-common-components/dist/DataTable.js Module not found: Can't resolve './DataTable.css' in '.\AdminPortal\admin-portal\node_mod
浏览 10提问于2017-09-06得票数 11
回答已采纳
1回答
无法在Angular2中导入/引用第三方库
c#、angular、typescript、webpack、asp.net-core
对不起，这个问题问了这么多次了。在过去的几天里，我一直在努力让它发挥作用，我觉得我错过了一些琐碎的东西，这使得这一切变得不可能。
背景:使用.NET核心作为Angular2前端的后端，使用webpack 2.2.1部署js/css。(我使用以下模板--顺便说一句，)
我试图使用以下内容将警报引用到类型记录服务(notifications.service.ts)中：
import { Injectable } from '@angular/core';
//import * as alertify from 'alertifyjs';
declare var a
浏览 2提问于2017-02-24得票数 1
回答已采纳
4回答
代码部署会失败，提示 “代码部署失败 -40017:获取cos文件属性失败”
标题：腾讯云生产环境（https://console.cloud.tencent.com/lav2/production）---》代码部署
操作：代码部署会失败，提示 “代码部署失败 -40017:获取cos文件属性失败”
浏览 1020提问于2018-02-08
2回答
webpack、angular 2、css和sass的设置问题
angular、sass、webpack-2
从原始版本更新我正在尝试设置最新版本的Angular2与webpack来处理sass。我有scss文件正在处理中。然而，现在的问题出在css上。
我已经将以下内容添加到app.component.ts文件中...
require('../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../public/styles/styles.scss');
我从npm start得到一个构建错误...
./~/bootstrap/dist/css/bootstrap.css
Modul
浏览 18提问于2017-02-10得票数 1
回答已采纳
2回答
从保龄球转到国家预防机制和webpack
angularjs、node.js、npm、webpack、bower
我的应用程序有一个平均堆栈(mongodb + express +角1+ nodejs)。我用webpack + npm +保龄球来建造和运行，并试图把保龄球完全转移到npm。我在这里学习了教程：非常有用，但我意识到我的前端依赖项并没有安装它们的依赖项，例如angular-animate.js抱怨没有找到angular.js。
按照上面的教程，我所做的方法是：
找到与我的首页文件相当的npm，并将它们添加到package.json中，以安装node_modules中的前端依赖项。
将前端依赖项从node_modules转移到public/lib。为此，我使用Webpack的CopyWe
浏览 1提问于2018-04-07得票数 1
1回答
无法使用css模块与Bootstrap4进行交互
reactjs、webpack、bootstrap-4、create-react-app、react-css-modules
我想使用的反应CSS模块与引导。
首先，我使用create-react-app命令创建了一个项目。然后，我用NPM安装了引导程序4，并将它包含在我的app.js中，如下所示：
import 'bootstrap/dist/css/bootstrap.css';
我还做了npm eject访问我的Webpack配置文件。
同时，我希望在我的layout.js文件中使用CSS模块，因此我转到webpack.config.dev.js并将模块更改为true：
test: /\.css$/,
use: [
require.resolve('s
浏览 3提问于2017-12-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
