I'm strugling to import a css file with webpack. I keep getting this error:
ERROR in ./index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style/style.css in c:\developement\prja/app
@ ./index.js 11:0-29
I tried all sorts of path for the style.css. like 'css!../style/style.css'
, '/style/style.css'
or './style/style.css'
but none of them works. I also tried to use require instead of import. But I keep getting the same error message.
Any ideas?
My index.js entry point file looks like this:
import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';
import '../style/style.css';
var ngModule = angular.module('app', []);
An this is my webpack.config.js:
module.exports = {
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
And this is my file sctructure:
| lighthouse.iml
| package.json
| webpack.config.js
|
+---app
| index.html
| index.js
|
\---style
style.css
答案 0 :(得分:0)
您的问题与context
属性和文件结构有关。
context
- 用于解析输入选项webpack docs
的基本目录(绝对路径!)。换句话说,这是webpack
开始查看您的应用的文件夹。以下是解决问题的两种方法:
从/app
媒体资源中移除context
- > context: __dirname
您甚至可以从 weblack.config 文件中删除context
将样式文件夹移至 app 文件夹
谢谢!