Webpack benötigt möglicherweise geeignete Loader für die Dateibearbeitung. Loader laden kein CSS von Importen

Question

Probleme mit meiner Webpack-Konfigurationsdatei, die das CSS nicht aus meinen importierten Dateien lädt. Ich habe mehrere Probleme, die Leute online hatten, die Test Regex für die Lader aktualisiert und einen Datei-Lader sowie einen URL-Lader hinzugefügt, aber immer noch das gleiche Problem. Es ist so, als ob Webpack (v3) nicht wüsste, wo oder wie die CSS aus einer meiner importierten Dateien geladen werden soll. Ich sollte auch beachten, dass ich diese App ursprünglich mit create-react-app erstellte und dann die node_module löschte und meine eigenen benutzerdefinierten webpack-config- und babel-Dateien einrichtete.

Die Fehlermeldung erhalte ich ist: -

Mein Paket JSON: - Basics sind Ich habe alle die CSS, sass und postcss installiert, Ladern ich kann nach mehreren Fragen Überprüfung online. Es ist eine Reaktion 16 App mit Reagieren Router V4.

 "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-eslint": "^6.0.0", 
    "babel-jest": "^21.2.0", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-syntax-dynamic-import": "^6.18.0", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-plugin-transform-object-rest-spread": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-2": "^6.24.1", 
    "codemirror": "^5.31.0", 
    "css-loader": "^0.28.7", 
    "eslint": "^2.5.1", 
    "eslint-plugin-react": "^4.2.3", 
    "extract-text-webpack-plugin": "^3.0.2", 
    "file-loader": "^1.1.5", 
    "font-awesome-loader": "^1.0.2", 
    "html-webpack-plugin": "^2.30.1", 
    "imports-loader": "^0.7.1", 
    "jest": "^21.2.1", 
    "jquery": "^3.2.1", 
    "less-loader": "^4.0.5", 
    "node-sass": "^4.7.2", 
    "nodemon": "^1.9.1", 
    "regenerator-runtime": "^0.11.1", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.19.0", 
    "transfer-webpack-plugin": "^0.1.4", 
    "url-loader": "^0.6.2", 
    "webpack": "^3.10.0", 
    "webpack-dev-server": "^2.9.4" 
    }, 

Meine Webpack-Konfigurationsdatei.

var cssName = 'index.css'; 

const extractText = new extractTextPlugin(cssName); 


module.exports = { 
    entry: ['./src/index.css', './src/index.js'], 
    output: { 
    path: path.resolve('public'), 
    filename: 'index_bundle.js' 
    }, 
    plugins: [ 
    extractText, 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }) 
    ], 

    module: { 
    loaders: [ 
    { 
     test: /\.css$/, 
     exclude: /node_modules/, 
     loader: ['style-loader', 'css-loader'] 
    },{ 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader'] 
    },{ 
     test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
    },{ 
     test: /\.less$/, 
     loader: 'style!css!less' 
    },{ 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
     cacheDirectory: true, 
     presets:[ 'es2015', 'react', 'stage-2' ] 
     } 
    }] 
    } 
}; 

Meine babelrc Datei.

/* ./.babelrc */

{ 
    "presets": ["react", ["es2015", { modules: false }]], 
    "plugins": [ 
    "syntax-dynamic-import", 
    ["transform-object-rest-spread", { "useBuiltIns": true }], 
    "transform-decorators-legacy", 
    "transform-class-properties", 
    ], 
} 

Answer 1

Ihre css-loader Config node_modules ausschließt, die font_awesome.css in ist:

{ 
    test: /\.css$/, 
    exclude: /node_modules/, 
    loader: ['style-loader', 'css-loader'] 
} 

Sie können eine include als Whitelist verwenden statt:

{ 
    test: /\.css$/, 
    include: [ 
    path.resolve(__dirname, "your_src"), 
    path.resolve(__dirname, "node_modules/font-awesome") 
    ] 
    loader: ['style-loader', 'css-loader'] 
}