SCSS nie kompilacji plików CSS w reakcji za pomocą WebPACK

Question

Poniżej moja struktura folderów & pliki do React projektu, który pracuje bez zarzutu, ale nie jestem w stanie dodać CSS przez SCSS poprzez Webpack użyciu extract-text-webpack-plugin. Daj mi znać, co robię źle w konfiguracji.

Folder Structure -

Webpack.config.js Plik -

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{ 
    allChunks: true 
}); 

module.exports = { 
    entry: './app/app.jsx', 
    output: { 
     path: path.resolve('dist'), 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} 
     ] 
    }, 
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] 
}; 

Package.json -

{ 
    "name": "reactyarn", 
    "version": "1.0.0", 
    "main": "index.js", 
    "license": "MIT", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "html-webpack-plugin": "^2.29.0", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.18.2", 
    "webpack": "^3.3.0", 
    "webpack-dev-server": "^2.5.1" 
    }, 
    "dependencies": { 
    "path": "^0.12.7", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    } 
} 

FYI -

ja nie otrzymuję żadnych błędów JS w konsoli, więc wierzę jej tylko konfigurację, która nie pracuje.

Answer 1

Wygląda na to, że brakuje jednego z ładowarki (sass-loader) i ustawiając je w modułach nieprawidłowo.

Wypróbuj poniższy przykład:

module.exports = { 
    entry: './app/app.jsx', 
    output: { 
     path: path.resolve('dist'), 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new 
     ] 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, 'relative/path/to/scss')] 
    }, // <--- this is new 
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] 
}; 

Korzystając ExtractPlugin.extract jesteś odwoływania się do środków, aby to zrobić w Webpack 2 (przy użyciu rules i use), ale plik konfiguracyjny WebPACK wydaje się być nastawiona Webpack 1.