- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将我的 css 包含在 webpack-dev-server 托管的服务器中。为此,我显然必须同时使用 style-loader 和 css-loader,以便将 css 捆绑到 JavaScript 中。
我无法让它工作。
我按照说明操作here ,但我收到以下错误:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
@ ./src/index2.js 1:0-27
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
我确信 main.css
与 index2.js
位于同一文件夹中
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
<小时/>
一个修复方法是使用 import css from './main.css';
而不是 import css from 'main.css';
(注意 ./
在文件名前面)。
但这感觉不对,因为 css-loader site表明应该是后者,而不是前者。
文档中是否有拼写错误?
谢谢。
最佳答案
这并不是一个真正的错字。如果你像这样导入它:
import css from 'main.css';
Webpack 认为您想要导入一个模块,并在 node_modules 下搜索该文件。例如,当您安装了 bootstrap 包并想要导入其 css 时,这是必要的。因此,当您的 css 文件来自依赖项时,您可以像这样导入该依赖项。但是当您想要导入 lokal 文件时,请始终使用相对路径。
所以它一定是:import css from './main.css';
进一步阅读:
关于javascript - Webpack css-loader : "Module not found: Error: Can' t resolve 'main.css' in . ..”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49800485/
我使用 resolver() 作为 socket() 的替代方法,因为我发现当多个连接建立到不同的 IP 时,它最终会停止工作。 无论如何它会向我返回一个警告,我应该使用 dns.resolver.R
我有这个代码: var promise1 = new Promise(function(resolve, reject) { setTimeout(() => { console
我仍在学习 PHP,我认为我不是母语人士,这并不难理解。 此时,看了一大堆文档,跳入了深水区,于是打开Laravel源文件,一个接一个地看,试图更好地理解MVC的整个实现,包括路由、中间件如何组合成一
public JsonResult GetEvents(double start, double end) { var userName = Session["UserName"] as st
我正在使用 bluebird,我看到了两种将同步函数解析为 Promise 的方法,但我不明白这两种方法之间的区别。看起来堆栈跟踪有点不同,所以它们不仅仅是一个别名,对吧? 那么首选的方式是什么? 方
我写了下面的代码: function readFile(path) { return new Promise(function(resolve, reject){ if(!fs
我正在使用 bluebird,我看到了两种将同步函数解析为 Promise 的方法,但我不明白这两种方法之间的区别。看起来堆栈跟踪有点不同,所以它们不仅仅是一个别名,对吧? 那么首选的方式是什么? 方
在某处读过这个例子: return new Promise( (resolve, reject) => { fs.readFile(file, (err, data) => { if (e
我刚开始学习 React,我一直在尝试让我的 React 应用程序连接到我的数据库 var mysql = require('mysql'); var con = mysql.createConnec
我需要从 $http 调用中返回一个 promise 中的自定义响应,以便我可以链接更多调用。我有两个可用的实现。有人可以解释两者之间的区别,并争论其中一个更好吗? 在 fooService.js 实
免责声明:这里实际上提出了两个问题,但我觉得它们密切相关。 我正在尝试将 promise 对象传递给指令,并且我想在 promise 解析后立即在指令中运行一些初始化代码。 在我的 Controlle
我正在尝试创建类似于 this code 的东西在 boost.asio 示例中找到。 套接字.h: class some_class { private: ... boost
正如我们所知,Promise 构造函数采用一个执行函数,该函数具有两个参数,我们使用它们来生成成功案例或失败案例。今天我在编程,我被卡住了,但后来我解决了这个问题,但我发现了一件事需要理解。 有什么区
我认为 Promise.resolve 和 new Promise(resolve) 可以互换。 考虑一下: A. new RSVP.Promise(function (resolve, reject
我下载了一个 Java 项目,我想研究并从中学习一些东西。当我在另一台计算机上下载它时效果很好,但是当我在我的计算机上尝试时,几乎每个声明和导入都会给出错误消息“* cannot be resolve
我昨天看到了一些有趣的编译器行为,我想我明白为什么会这样,但我想确定一下。所以,我不会写我的推理,只写事实。 请注意,我使用 vector 而不是 string 并不是错字。我是故意这样做的,这样编译
我正在尝试运行 Ember 测试,它给出了这个错误,提示无法找到从 `AppName/resolver 导入的模块 ember-resolver。 我不确定是什么原因造成的。我正在使用 Ember-c
Code#1 和 Code#2 的区别在于:Code#1 使用 resolve(p) 而 Code#2 使用 p.then(()=>resolve()) 。我希望输出序列是不变的,但它们会生成不同的序
IntelliJ IDEA 无法解析内置 JVM 类型和方法的常见原因有哪些?例如,当我将鼠标悬停在 String 上时,工具提示显示“无法解析符号“String””。就好像 IntelliJ 不知道
IntelliJ IDEA 无法解析内置 JVM 类型和方法的常见原因有哪些?例如,当我将鼠标悬停在 String 上时,工具提示显示“无法解析符号“String””。就好像 IntelliJ 不知道
我是一名优秀的程序员,十分优秀!