sử dụng LESS trong gói webpack và es6

Question

Tôi đang theo dõi một bài giảng trên Angular With Webpack.
Tôi đang cố gắng thêm bộ tải ít hơn và tiếp tục gặp lỗi.

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 

My webpack.config.js là:

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" 
      }   
     ] 
    } 
}; 

My app.js là:

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

Bên trong src thư mục tôi có app.js, index.html và kiểu. ít tệp hơn.

cuối cùng, đây là package.json tôi file:

{ 
    "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" 
    } 
} 

bất kỳ ý tưởng tại sao tôi nhận được lỗi này?
Cảm ơn

Answer 1

tôi đã có vấn đề chính xác tương tự như bạn. tôi đã xoay sở để giải quyết điều đó với sự thay đổi nhỏ.

path.join(__dirname, 'src') 

thay vì sử dụng:

__dirname + '/src/ 

bây giờ, hãy chắc chắn rằng webpack.config.js bạn trông giống như:

var path = require('path'); 

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

và khi tôi nhập style.less tôi được sử dụng như ở trên

import './style.less'; 

Answer 2

Nếu tất cả các tập tin nằm trong cùng thư mục (src), dòng đầu tiên trong app.js nên là:

import './style.less';