Webpack - Build css not applied

Question

我是ReactJS的新手。我試圖使用SASS裝載機

我的WebPack配置反應使用SCSS看起來像這 -

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

所有這些配置都是從那裏各自的單證。

。

當我運行的WebPack-DEV-服務器時，它顯示了在輸出 -

這是當我保存一個文件SCSS屏幕 - 注意 - 我已經刪除了從我的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'], 
} 

安裝3臺裝載機作爲一個開發的依賴，如果你沒有他們。

此外，您不需要在導入scss文件時指定名稱，只需導入它即可。

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