Webpackはcss-loaderでcssを処理していません。（反応する）-ssss-modules

Question

imはwebpackをreactと（react）-css-modulesで実行しようとしていますが、webpackはCSSを解析しません。これは共通の設定です。

const webpack = require("webpack"), 
merge  = require("webpack-merge"), 
path  = require("path"), 
CleanWebpackPlugin = require('clean-webpack-plugin'), 
HtmlWebpackPlugin = require("html-webpack-plugin"); 

const lint = require("./webpack.lint"); 
const babel = require("./webpack.babel"); 
const styles = require("./webpack.styles"); 

const PATH = { 
    app: path.join(__dirname, "../../src/app.js"), 
    build: path.join(__dirname, "../../public"), 
    src : path.join(__dirname, "../../src"), 
}; 

const commonConfig = merge([ 
    { 
     entry: { 
      app: PATH.app 
     }, 
     output: { 
      path: PATH.build, 
      filename: "[name].[ext]" 
     }, 
     resolve: { 
      extensions: [".js", ".jsx"], 
     }, 
     plugins: [ 
      new HtmlWebpackPlugin({ 
       template: "src/index.ejs", 
       //inject: "head", 
      }), 
      new CleanWebpackPlugin("public", { 
       verbose: true, 
       root: path.resolve(__dirname, "../../") 
      }), 
      new webpack.HotModuleReplacementPlugin(), 
     ], 
    }, 
    lint({ 
     include: PATH.app, 
     options: { 
      plugins: ["react"], 
     } 
    }), 
    babel({ 
     include: PATH.app 
    }), 
    styles({ 
     include: PATH.app 
    }) 
]); 

module.exports = (env) => { 
    return commonConfig; 
}; 

これはCSSローダ構成

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = ({include, exclude = /node_modules/, options}) => ({ 
    module: { 
     rules: [ 
      { 
       test: /\.s?css$/, 
       include, 
       exclude, 
       options, 
       use: ExtractTextPlugin.extract({ 
         use: [ 
         { 
          loader: "css-loader", 
          options: { 
           importLoaders: 1, 
           modules: true, 
           localIdentName: "[name]__[local]___[hash:base64:5]" , 
          } 
         }, 
         "postcss-loader", 
         "resolve-url-loader", 
         "sass-loader"], 
         fallback: "style-loader", 
        }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("styles.css"), 
    ] 
}); 

JavaScriptとJSXが正しくコンパイルイストが、CSSがで毎回失敗である：

モジュールが失敗した解析：予期しないトークン（1：5） をこのファイルタイプを処理するために適切なローダーが必要な場合があります。

import React, { Component } from "react"; 
import ReactDOM from "react-dom"; 

import styles from "./styles.css"; 

class App extends Component { 
    render() { 
     return (
      <div> 
       <p>Hallo</p> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(
    <App/>, 
    document.getElementById("app") 
); 

ノード8.7.0およびwebpack 3.8.1上のIm。すべてのローダーが最新バージョンを使用しています。 ありがとう

Answer 1

私は.ssをcss-loaderに渡したため、ローダーが失敗しました。インクルードパスを空のままにしておくと動作します。