Webpack - 빌드 CSS가 적용되지 않았습니다.

Question

ReactJS를 처음 사용합니다. 내가 말대꾸 - 로더에게

내 웹팩 설정을 사용하여 반응에하는 SCS를 사용하는 시도하고 이러한 모든 구성이 각각의 문서화 출신 this-

var webpack = require('webpack'); 
var path = require('path'); 

var APP_DIR = path.resolve(__dirname + 'react-js/src/'); 
var BUILD_DIR = path.resolve(__dirname, 'react-js/dist/'); 

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

module.exports = { 
    entry: './react-js/src/index.jsx', 
    output: { 
     path: BUILD_DIR, 
     publicPath: '/dist', 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader', 
        publicPath: '/dist' 
       }) 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader!sass-loader', 
        publicPath: '/dist' 
       }) 
      }, 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css'), 
    ] 
} 

것 같습니다.

.

나는 그것이 출력 -

이것은 내가하는 SCS 파일 저장 화면입니다 다음을 보여줍니다 웹팩-dev에 서버 실행 - 주를 - 내가 삭제 한 내 webpack 구성 파일에서 ExtractTextPlugin.

디렉토리 구조는 -

난 그냥이 렌더링에 가져 오지 어떻게 깨닫지 못한다는 응용 프로그램을 반응한다. 아래에 표시된 것처럼 index.jsx에서 scss 파일을 가져 오는 것이 CSS 파일을 종속성으로 만들 것이라고 생각했지만 작동하지 않습니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import App from './app'; 

import style from '../../scss/main.scss'; 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

왜?

편집

Package.json

{ 
    "name": "skippo-vendor-admin-webui", 
    "version": "1.0.0", 
    "description": "", 
    "main": "./react-js/src/index.jsx", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "./node_modules/.bin/webpack -d --progress --colors", 
    "prod": "./node_modules/.bin/webpack -p --progress --colors", 
    "watch": "./node_modules/.bin/webpack -d --progress --colors --watch", 
    "start": "./node_modules/.bin/webpack-dev-server --progress --colors --hot --inline --contentBase './react-js/'" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "chai": "^3.5.0", 
    "css-loader": "^0.28.1", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "karma": "^1.6.0", 
    "karma-chai": "^0.1.0", 
    "karma-chrome-launcher": "^2.1.1", 
    "karma-mocha": "^1.3.0", 
    "karma-sinon": "^1.0.5", 
    "karma-webpack": "^2.0.3", 
    "mocha": "^3.3.0", 
    "node-sass": "^4.5.2", 
    "sass-loader": "^6.0.3", 
    "sinon": "^2.2.0", 
    "style-loader": "^0.17.0" 
    }, 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-redux": "^5.0.4", 
    "react-router": "^4.1.1" 
    } 
} 

Answer 1

변경이 줄을

import style from '../../scss/main.scss'; 

와

import '../../scss/main.scss'; 

Answer 2

ExtractTextPlugin은 프로덕션 빌드에만 사용되어야합니다. 특별 처리없이 제공 될 수있는 별도의 컴파일 된 CSS 파일을 생성하기 때문입니다.

개발의 경우, 대신이 규칙을 사용할 수 있습니다 : 당신이 그들을이없는 경우

{ 
    test: /\.s?css$/, 
    use: ['style-loader', 'css-loader', 'sass-loader'], 
} 

이 dev에 의존의 3 로더를 설치합니다.

또한 scss 파일을 가져올 때 이름을 지정할 필요가 없습니다. 가져 오기 만하면됩니다.

import '../../scss/main.scss';