एससीएसएस सीएसएस करने के लिए संकलन नहीं फ़ाइलें निम्न Webpack

Question

का उपयोग कर प्रतिक्रिया में मेरे फ़ोल्डर संरचना React परियोजना जो ठीक काम कर रहा है के लिए & फ़ाइलें है, लेकिन मैं extract-text-webpack-plugin का उपयोग कर Webpack के माध्यम से SCSS के माध्यम से CSS जोड़ने में असमर्थ हूँ। मुझे बताएं कि मैं कॉन्फ़िगरेशन के साथ क्या गलत कर रहा हूं।

फ़ोल्डर संरचना -

Webpack.config.js फ़ाइल -

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 करें -

मैं कंसोल में किसी भी जे एस त्रुटि नहीं मिल रहा है, तो मैं अपनी ही विन्यास जो काम नहीं कर रहा विश्वास करते हैं।

Answer 1

आप लोडर में से एक (sass-loader) लापता हो सकता है और गलत तरीके से अपने मॉड्यूल में उन्हें सेट अप दिखाई देते हैं।

नीचे दिए गए उदाहरण का प्रयास करें:

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

ExtractPlugin.extract का उपयोग कर आप साधन Webpack 2 में यह करने के लिए संदर्भित कर रहे हैं (rules और use उपयोग करते हुए) लेकिन अपने Webpack कॉन्फ़िग फ़ाइल Webpack 1 की ओर तैयार प्रतीत होता है।