javascript 找不到模块：错误：无法解析“css-loader”

Module not found: Error: Can't resolve 'css-loader'

提问by acui145

I'm using css-loader and get following error:

我正在使用 css-loader 并收到以下错误：

ERROR in ./src/pages/home/index.js
Module not found: Error: Can't resolve 'css-loader' in '/Users/jian/Documents/sina/webpack-barbarian-test'
@ ./src/pages/home/index.js 2:0-20
@ multi ../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 中的
错误未找到模块：错误：无法解析 '/Users/jian/Documents/sina/webpack-barbarian-test'
@ ./src/ 中的'css-loader' pages/home/index.js 2:0-20
@ multi ../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:

./src/pages/home/index.js:

import $ from 'jQuery'
import './style.css'

$("#container").html('This is a test file, 1')

webpack.config.js:

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
        }
    }]
}

回答by acui145

Figured out how this err happened

弄清楚这个错误是如何发生的

I'm developing a npm module and using npm linkto test it on my local computer.

我正在开发一个 npm 模块并npm link用于在我的本地计算机上对其进行测试。

It seems that css-loaderand post-loaderalso need to be installed in the test directory.

看来，css-loader和post-loader还需要被安装在测试目录。

so npm install css-loader -Dworked.

所以npm install css-loader -D工作。

thx @Aritra Chakraborty.

谢谢@Aritra Chakraborty。