![](/img/trans.png)
[英]Webpack css-loader: “Module not found: Error: Can't resolve 'main.css' in …”
[英]Module not found: Error: Can't resolve 'css-loader'
我正在使用 css-loader 并收到以下错误:
./src/pages/home/index.js 中的错误
找不到模块:错误:无法解析“/Users/jian/Documents/sina/webpack-barbarian-test”中的“css-loader”
@ ./src/pages/home/index.js 2:0-20
@多../webpack-barbarian/node_modules/webpack-dev-server/client? http://localhost ../webpack-barbarian/node_modules/webpack/hot/dev-server.js ./src/pages/home/index.js
./src/pages/home/index.js:
import $ from 'jQuery'
import './style.css'
$("#container").html('This is a test file, 1')
webpack.config.js:
{
mode: 'development',
entry: {
home: './src/pages/home/index.js'
},
output: {
path: '/Users/jian/Documents/sina/webpack-barbarian-test/dist',
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', 'jsx', '.vue', '.json'],
alias: {}
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
include: ['/Users/jian/Documents/sina/src', '/Users/jian/Documents/sina/test'],
options: {
presets: [['env', {
modules: false,
targets: {
browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
}
}], 'stage-2'],
plugins: ['transform-runtime']
}
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true
},
exclude: ['node_modules']
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/fonts/[name].[hash:7].[ext]'
}
},
{
test: /\.css$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}]
},
{
test: /\.less$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}]
},
{
test: /\.sass$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
sourceMap: true
}
}]
},
{
test: /\.scss$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}]
},
devtool: 'cheap-module-eval-source-map',
plugins: [HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000
},
HtmlWebpackPlugin {
options: {
template: 'src/pages/home/index.html',
templateParameters: [Function: templateParametersGenerator],
filename: 'home.html',
hash: true,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: ['manifest', 'vendor', 'home'],
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false,
injuct: true
}
}]
}
弄清楚这个错误是如何发生的
我正在开发一个 npm 模块并使用npm link
在我的本地计算机上对其进行测试。
看来css-loader
和post-loader
也需要安装在test目录下。
所以npm install css-loader -D
起作用了。
谢谢@Aritra Chakraborty。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.