Javascript 错误：无法解析模块“样式加载器”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35171288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: Cannot resolve module 'style-loader'
提问by Rahul Dagli
I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader'in import.js file although i've specified the file path correctly.
我正在使用带有 webpack 和 react 框架的样式加载器。当我在终端中运行 webpack 时，Module not found: Error: Cannot resolve module 'style-loader'虽然我已经正确指定了文件路径，但我却进入了 import.js 文件。
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:
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']
}
}
};
回答by David Guan
Try run script below:
尝试运行下面的脚本：
npm install style-loader --save
npm install style-loader --save
Modify webpack config, add modulesDirectoriesfield in resolve.
修改 webpack 配置，modulesDirectories在resolve.
resolve: {
extensions: ['', '.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
}
回答by PKA
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.
它基本上是读取加载器 - 使用 babel-loader 测试 jsx，下一个测试是使用 style-loader 和 css-loader 的 css 文件，它将识别模块。此外，您应该退出 npm start，然后运行“npm install”并运行“npm start”。希望这应该能解决这个问题。
回答by sealocal
If you try to import a css file with this line:
如果您尝试使用此行导入 css 文件：
import '../css/style.css';
and have added the style-loaderin your webpack config.
并style-loader在您的 webpack 配置中添加了。
The error states:
错误指出：
Module not found: Error: Cannot resolve module 'style-loader'
找不到模块：错误：无法解析模块“样式加载器”
the modulenamed "style-loader" is not resolved.
名为“style-loader”的模块未解析。
You need to install that module with:
您需要使用以下命令安装该模块：
$ npm install style-loader --save
Or, if you're using yarn:
或者，如果您使用纱线：
$ yarn add style-loader
Then run webpackagain.
然后webpack再次运行。
回答by StephenSolace
I wanted to add on to what David Guansaid. In the newer versions of Webpack (V2+) moduleDirectorieshas been replaced with modules. The updated resolveportion of his answer would look like this:
我想补充关大卫所说的话。在较新版本的 Webpack (V2+)moduleDirectories中，已被modules. resolve他的答案的更新部分如下所示：
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.
有关更多信息，您可以查看他们的官方文档。希望这可以帮助那里的人。
回答by sinistral
Under Webpack 3, with node_modulein a non-standard location, I had to use both resolveand resolveLoaderconfiguration objects:
在 Webpack 3 下，node_module在非标准位置，我必须同时使用resolve和resolveLoader配置对象：
resolve: {
modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
modules: ["build-resource/js/node_modules"]
},
回答by Daniel
If you're node_modules are on the same dir as your webpack config file you can simply add context: __dirname.
如果你的 node_modules 与你的 webpack 配置文件在同一个目录下，你可以简单地添加context: __dirname.
module.exports = {
context: __dirname,
entry: [
...
(works in both webpack 1 and 2)
（适用于webpack 1 和 2）
回答by Turkhan Badalov
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
我使用 Windows 并做了所有事情，但没有任何效果。似乎控制台没有足够的权限。所以，在管理员模式下运行后，我重新进入
npm install
and everything worked. You can see the result by appearing a lot of modules in node_modules directory.
一切正常。你可以通过在 node_modules 目录中出现很多模块来查看结果。
