![](/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.