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; 
}; 

이

은

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"), 
    ] 
}); 

자바 스크립트와 jsx가 제대로 컴파일 인도 표준시는 CSS 로더 설정을하지만 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 로더에 전달했기 때문에 로더가 실패했습니다. 내가 포함 경로를 비워두면 작동합니다.