我正在使用带有webpack的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']
}
}
};
答案 0 :(得分:60)
尝试下面的运行脚本:
npm install style-loader --save
修改webpack配置,在modulesDirectories
中添加resolve
字段。
resolve: {
extensions: ['', '.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
}
答案 1 :(得分:20)
请运行此脚本:
npm install style-loader css-loader --save
将模块设置如下:
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.join(_dirname, 'app')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
}
它基本上是读取加载器 - 使用babel-loader测试jsx,下一个测试是使用style-loader和css-loader的css文件,它将识别模块。此外,你应该退出npm start,然后运行" npm install"并运行" npm start"。希望这可以解决这个问题。
答案 2 :(得分:10)
如果您尝试使用以下行导入css文件:
import '../css/style.css';
并在您的webpack配置中添加了style-loader
。
错误说明:
找不到模块:错误:无法解析模块' style-loader'
模块命名为" style-loader"没有解决。
您需要使用以下命令安装该模块:
$ npm install style-loader --save
或者,如果您正在使用纱线:
$ yarn add style-loader
然后再次运行webpack
。
答案 3 :(得分:8)
我想补充David Guan所说的内容。在较新版本的Webpack(V2 +)中,moduleDirectories
已替换为modules
。他答案的更新resolve
部分如下所示:
resolve: {
extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
modules: [
'node_modules'
]
}
有关详情,请查看他们的official documentation。希望这可以帮助那些人。
答案 4 :(得分:5)
在Webpack 3下,node_module
位于非标准位置,我必须使用resolve
和resolveLoader
配置对象:
resolve: {
modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
modules: ["build-resource/js/node_modules"]
},
答案 5 :(得分:1)
如果你的node_modules与你的webpack配置文件在同一个目录上,你只需添加context: __dirname
。
module.exports = {
context: __dirname,
entry: [
...
(适用于 webpack 1和2 )
答案 6 :(得分:1)
这很简单,您必须将第一个syle-loader安装到css-loader。
答案 7 :(得分:0)
我使用Windows并做了一切,但没有任何效果。看来控制台没有足够的权限。因此,在管理员模式下运行后,我重新进入
npm install
一切正常。您可以通过在node_modules目录中显示许多模块来查看结果。