[英]Webpack css-loader: “Module not found: Error: Can't resolve 'main.css' in …”
I am trying to include my css in the server hosted by webpack-dev-server. 我正在尝试将我的CSS包含在webpack-dev-server托管的服务器中。 For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript. 为此,我显然必须将style-loader和css-loader一起使用,以便将CSS捆绑到JavaScript中。
I can't get it to work. 我无法正常工作。
I follow the instructions here , yet I get the following error: 我按照此处的说明进行操作,但出现以下错误:
ERROR in ./src/index2.js ./src/index2.js中的错误
Module not found : Error: Can't resolve ' main.css ' in C:\\Users\\magnusga\\Downloads\\Programming\\TestPrograms\\test\\src' 模块未找到 :错误:无法用C解决' 的main.css':\\用户\\ magnusga \\下载\\程序\\ TestPrograms \\测试\\ src”中
@ ./src/index2.js 1:0-27 @ ./src/index2.js 1:0-27
@ multi (webpack)-dev-server/client? @多(webpack)-dev-server / client? http://localhost:8080 ./src/index2.js http:// localhost:8080 ./src/index2.js
I know for certain that main.css
is in the same folder as index2.js
我肯定知道main.css
与index2.js
在同一个文件夹中
index2.js index2.js
import css from 'main.css';
// ...much more code
webpack.config.js 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 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"
}
One fix is to use import css from './main.css';
一种解决方法是使用import css from './main.css';
instead of import css from 'main.css';
而不是import css from 'main.css';
(note the ./
infront of the file name). (请注意文件名的./
开头)。
That does not feel right though, because the css-loader site shows that it should be the latter, not the former. 但是,这感觉不对,因为css-loader站点显示应该是后者,而不是前者。
Is it a typo in the docs? 是文档中的错字吗?
Thank you. 谢谢。
It is not really a typo. 这不是真正的错字。 If you import it like this: 如果这样导入:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. Webpack认为您要导入模块,并在node_modules下搜索此文件。 This is necessary, when you for example installed the bootstrap package and want to import its css. 例如,当您安装了引导程序包并想要导入其CSS时,这是必需的。 So when your css file comes from a dependency, you import that dependency like this. 因此,当您的css文件来自某个依赖项时,您可以像这样导入该依赖项。 But when you want to import a lokal file, always use relative paths. 但是,当您要导入lokal文件时,请始终使用相对路径。
So it must be: import css from './main.css';
因此它必须是: import css from './main.css';
Further Reading: 进一步阅读:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.