Webpack does not find my css file

时间:2016-04-25 09:32:16

标签: css import webpack

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

1 个答案:

答案 0 :(得分:0)

您的问题与context属性和文件结构有关。

context - 用于解析输入选项webpack docs的基本目录(绝对路径!)。换句话说,这是webpack开始查看您的应用的文件夹。以下是解决问题的两种方法:

  1. /app媒体资源中移除context - > context: __dirname您甚至可以从 weblack.config 文件中删除context

  2. 样式文件夹移至 app 文件夹

  3. 谢谢!