在webpack中使用LESS和es6
我正在关注Angular With Webpack的演讲。
我正在尝试添加较少的加载程序并且不断收到错误。
在webpack中使用LESS和es6
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和样式。少文件。
最后,这是我的的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"
}
}
为什么我收到此错误的任何想法?
感谢
我有完全相同的问题,像你这样的。我设法通过微小的改变来解决这个问题。
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';
如果所有文件都在同一个目录(src
),在app.js
第一行应该是:
import './style.less';
将此修复结果应用于更多错误:
./src/style.less中的错误 未找到模块:错误:无法解析'file'或'directory'./../node_modules/ D:\ projects \ dev \ webpack中的css-loader/index.js -angular-demo/src @ ./src/style.less 4:14-116 ./src/style.less中的错误 未找到模块:错误:无法解析'文件'或'目录'./。 ./node_modules/ D:\ projects \ dev \ webpack-angular-demo/src中的style-loader/addStyles.js @ ./src/style.less 7:13-68 –
gilad
使用两个点使用正确的加载程序因此排除规则正在运行。现在,排除不起作用,并且也搜索node_modules文件夹。我想.... – gilad
如果我尝试用你的确切设置和我的建议来运行'webpack-dev-server',它运行良好。你能否确认所有的模块已经安装/可能再次运行'npm install'? –
就是这样!非常感谢。我会尽力找到'为什么'。 TNX – gilad