오류 : 'style-loader'모듈을 해결할 수 없습니다.
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 :
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']
}
}
};
아래 스크립트를 실행 해보십시오.
npm install style-loader --save
webpack 구성을 수정 modulesDirectories
하고 resolve
.
resolve: {
extensions: ['', '.js', '.jsx', '.css'],
modulesDirectories: [
'node_modules'
]
}
이 스크립트를 실행하십시오 :
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"를 실행해야합니다. 이 문제가 해결되기를 바랍니다.
다음 줄을 사용하여 css 파일을 가져 오려고하면 :
import '../css/style.css';
style-loader
웹팩 구성에을 추가했습니다 .
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
Or, if you're using yarn:
$ yarn add style-loader
Then run webpack
again.
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"]
},
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 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.
참고URL : https://stackoverflow.com/questions/35171288/error-cannot-resolve-module-style-loader
'Development Tip' 카테고리의 다른 글
Xcode 4는 리팩토링에서 스냅 샷 생성을 비활성화합니다. (0) | 2020.11.27 |
---|---|
Ansible에서 임의의 원격 사용자의 홈 디렉토리를 얻는 방법은 무엇입니까? (0) | 2020.11.27 |
PowerShell Copy-Item의 제외 목록이 작동하지 않는 것 같습니다. (0) | 2020.11.27 |
추가 된 요소에서 CSS 전환 트리거 (0) | 2020.11.26 |
find (), findOrFail (), first (), firstOrFail (), get (), list (), toArray ()의 차이점은 무엇입니까? (0) | 2020.11.26 |