SCSS tập tin không biên dịch để CSS trong phản ứng sử dụng Webpack

Question

Sau đây là cấu trúc thư mục của tôi & Files for React dự án mà đang làm việc tốt nhưng tôi không thể thêm CSS qua SCSS qua Webpack sử dụng extract-text-webpack-plugin. Hãy cho tôi biết những gì tôi đang làm sai với cấu hình.

Thư mục Structure -

Webpack.config.js File -

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 -

Tôi không nhận được bất kỳ lỗi JS nào trong bảng điều khiển, vì vậy tôi tin rằng cấu hình của nó không hoạt động.

Answer 1

Bạn dường như thiếu một trong những bộ tải (sass-loader) và thiết lập chúng trong module của bạn không chính xác.

Hãy thử ví dụ dưới đây:

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

Bằng cách sử dụng ExtractPlugin.extract bạn đang tham khảo các phương tiện để làm điều này trong Webpack 2 (sử dụng rules và use) nhưng tập tin Webpack cấu hình của bạn dường như hướng tới Webpack 1.