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