在webpack和es6中使用LESS

Question

我正在关注Angular With Webpack的演讲.
我正在尝试添加较少的加载程序并继续收到错误.

 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是:

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

我的app.js是:

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

在src目录中,我有app.js,index.html和style.less文件.

最后,这是我的package.json文件:

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

任何想法为什么我收到这个错误？
谢谢

Answer 1

我和你有完全相同的问题。我设法通过微小的改变解决了这个问题。

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';