2016-06-28 3 views
5

나는 Angular With Webpack에 대한 강의를 진행 중입니다.
적은 로더을 추가하려고하는데 오류가 계속 발생합니다.webpack 및 es6에서 LESS를 사용합니다.

ERROR in ./src/app.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src 
@ ./src/app.js 3:0-24 

webpack.config.js
입니다 : 내 app.js

module.exports = { 
    context: __dirname + '/src', 
    entry:'./app.js', 
    module:{ 
     loaders:[ 
      { 
       //create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D 
       //https://github.com/babel/babel-loader 
       test:/\.js$/, 
       exclude:'/node_modules', 
       loader:'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       //take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D 
       //https://github.com/webpack/less-loader 
       test:/\.less$/, 
       exclude:'/node_modules', 
       loader:"style!css!less" 
      }   
     ] 
    } 
}; 

입니다 : 내가 가지고있는 SRC 디렉토리 내부

import '../style.less'; 
class Log{ 
    constructor(){ 
     console.log("sdfsdf"); 
    } 
} 
new Log(); 

app.js, index.html 및 스타일 적은 파일.

{ 
    "name": "webpack-angular-demo", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "css-loader": "^0.23.1", 
    "less": "^2.7.1", 
    "less-loader": "^2.2.3", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 


내가이 오류를 받고 있어요 왜 어떤 생각 :

마지막으로,이 내 package.json 파일입니다? 모든 파일을 같은 디렉토리 (src)에있는 경우
감사

답변

4

난 당신처럼 똑같은 문제를 가지고 있었다. 나는 작은 변화로 그것을 해결할 수 있었다. 사용하는 대신

path.join(__dirname, 'src') 

: 지금

__dirname + '/src/ 

, 당신의 webpack.config.js 모양을 확인하십시오 :

var path = require('path'); 

module.exports = { 
context: path.join(__dirname, 'src'), 
... 

나는 내가 좋아하는 사용 style.less을 가져올 때 위

import './style.less'; 
+1

그게 다야! 고마워. 나는 '왜'를 찾으려고 노력할 것이다. tnx – gilad

1

app.js의 첫 번째 행은 다음과 같습니다 import './style.less';

+0

이 수정 결과에 더 많은 오류가 적용됩니다.
./src/style.less에서 오류가 발생했습니다. 모듈을 찾을 수 없습니다 : '파일'또는 '디렉토리'를 해결할 수 없습니다 ./../../node_modules/ css-loader/index.js in D : \ projects \ dev \ webpack -angular-demo/src @ ./src/style.less 4 : 14-116 오류 ./src/style.less 모듈을 찾을 수 없음 : 오류 : 'file'또는 'directory'./을 해결할 수 없습니다. ./node_modules/ D : \ projects \ dev \ webpack-angular-demo/src에있는 스타일 로더/addStyles.js @ ./src/style.less 7 : 13-68 – gilad

+0

두 점으로 올바른 로더가 사용됩니다. 따라서 제외 규칙이 작동합니다. 이제 exclude가 작동하지 않고 node_modules 폴더도 검색됩니다. 내 생각에 .... – gilad

+0

정확한 설치와 제안으로'webpack-dev-server'를 실행하려고하면 잘 돌아갑니다. 모든 모듈이 설치되어 있는지/다시'npm install'을 한 번 더 실행했는지 확인할 수 있습니까? –