错误: 无法解析模块“样式加载程序”

我使用的是带有 webpack 和 response 框架的 style-loader。当我在终端运行 webpack 时，我在 import.js 文件中得到了 Module not found: Error: Cannot resolve module 'style-loader'，尽管我已经正确地指定了文件路径。

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

Webpack.config.js:

var webpack = require('webpack');
var path = require('path');


var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');


module.exports = {
entry: [
// Set up an ES6-ish environment
'babel-polyfill',


// Add your application's scripts below
APP_DIR + '/import.js'
],
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',


exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
}
};
98355 次浏览
小开
最佳答案

Try run script below:

npm install style-loader --save

Modify webpack config, add modulesDirectories field in resolve.

    resolve: {
extensions: ['', '.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
}
小开

Please run this script:

 npm install style-loader css-loader --save

Set your module as below:

module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.join(_dirname, 'app')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
}

It's basically reading as for loaders - test jsx using babel-loader and the next test is a css file using style-loader and css-loader, which will recognize the modules. Also, you should exit out of npm start, and run "npm install" and run "npm start". Hopefully, this should take care of the issue.

小开

If you try to import a css file with this line:

import '../css/style.css';

and have added the style-loader in your webpack config.

The error states:

Module not found: Error: Cannot resolve module 'style-loader'

the module named "style-loader" is not resolved.

You need to install that module with:

$ npm install style-loader --save-dev

Or, if you're using yarn:

$ yarn add style-loader -D

Then run webpack again.

小开

If you're node_modules are on the same dir as your webpack config file you can simply add context: __dirname.

module.exports = {
context: __dirname,
entry: [
...

(works in both webpack 1 and 2)

小开

I wanted to add on to what David Guan said. In the newer versions of Webpack (V2+) moduleDirectories has been replaced with modules. The updated resolve portion of his answer would look like this:

resolve: {
extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
modules: [
'node_modules'
]
}

For more information you can check out their official documentation. Hope this helps someone out there.

小开

Under Webpack 3, with node_module in a non-standard location, I had to use both resolve and resolveLoader configuration objects:

resolve: {
modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
modules: ["build-resource/js/node_modules"]
},
小开

I use Windows and did everything but nothing worked. It appeared console didn't have enough permissions. So, after running in Admin mode I re-entered 

npm install

and everything worked. You can see the result by appearing a lot of modules in node_modules directory.

小开

it is very simple you have to install the fist syle-loader the css-loader.

小开

remove 'style-loader!css-loader', make it ['style-loader','css-loader'] remove empty string '' from extensions array. It will be look like bellow

module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
            

]
},
    

resolve: {
extensions: ['.js', '.jsx', '.css'],
},

提交答案