Webpack lädt keine scss-Datei

Question

Ich habe mein Projekt auf Webpack 3 aktualisiert. Jetzt wird meine scss-Datei nicht geladen. Früher habe ich geladen, als ich Webpack 1 benutzt habe. Aber jetzt folge ich der Dokumentation und probiere viele verschiedene Dinge aus. Aber immer noch nicht in der Lage, die SCSS-Datei zu laden. Irgendwelche Vorschläge, was ich falsch mache oder wie man die scss-Datei lädt. Die style.scss befindet sich direkt unter/src.

Folgendes ist meine Webpack-Konfiguration und package.json.

var webpack = require("webpack"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const path = require('path'); 
var APP_DIR = path.resolve(__dirname, './src'); 
module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: path.resolve(__dirname, './public/js'), 
     filename: 'my-first-webpack.bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: [{ 
        loader: "style-loader" // creates style nodes from JS strings 
       }, { 
        loader: "css-loader" // translates CSS into CommonJS 
       }, { 
        loader: "sass-loader" // compiles Sass to CSS 
       } 
       ] 
      }, 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       use: { 
        loader: 'babel-loader' 

       } 

      }, 
      { 
       test: /\.(png|svg|jpg|webp)$/, 
       use: { 
        loader: 'file-loader', 
       }, 
      } 
     ] 
    } 
} 

• Package.JSON

  { "name": "basavasamiti", "version": "0.1.0", "private": true, "dependencies": { "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.7", "file-loader": "^0.11.2", "path": "^0.12.7", "react": "^15.6.1", "react-bootstrap": "^0.31.0", "react-bootstrap-carousel": "^1.2.0", "react-dom": "^15.6.1", "react-router-bootstrap": "^0.24.2", "react-router-dom": "^4.1.2", "react-scripts": "1.0.11", "react-svg-loader": "^1.1.1", "style-loader": "^0.18.2", "svg-loader": "0.0.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": { "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "webpack": "^3.6.0" } }

Nachdem nun zu Webpack Config Änderungen sieht es so aus, aber ich erhalte einen Fehler Extrakt-Text-webpack-Plugin Loader wird ohne entsprechendes Plugin verwendet. Aber ich habe es schon installiert. Mein Paket.json zeigt einen Eintrag für dieses Plugin. Nicht sicher warum dieser Fehler.

`

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CopyAssets = require('copy-webpack-plugin'); 
const WriteFiles = require('write-file-webpack-plugin'); 

var isProd = process.env.NODE_ENV === 'production'; // true or false 

var prod = '../index.js'; 
var dev = 'index.js'; 
var outputFile = isProd ? prod : dev; 

module.exports = { 

    entry: { 
     app: path.resolve(__dirname, 'src/') + '/index.js' 
    }, 
    output: { 
     path: path.resolve(__dirname, 'public/'), 
     filename: 'js/index.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        //resolve-url-loader may be chained before sass-loader if necessary 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.js$/, 
       exclude: path.resolve(__dirname, 'node_modules'), 
       use: 'babel-loader' 
      }, 
      { 
       test: /\.(pug|html)$/, 
       use: ['raw-loader', 'pug-html-loader'] 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       use: 'file-loader' 
      } 

     ] 
    }, 
    devServer: { 
     contentBase: path.resolve(__dirname, 'dist'), 
     compress: true, 
     port: 8001, 
     stats: 'errors-only', 
     open: true, 
     host: '0.0.0.0', 
     disableHostCheck: true 
    }, 
    plugins: [ 
     new WriteFiles(), 
     new HtmlWebpackPlugin(
      { 
       filename: outputFile, 
       template: 'src/index.js', 
       inject: true 
      } 
     ), 
     new CopyAssets([ 
      { 
       from: 'src/images', 
       to: 'img' 
      } 
     ]), 

     new ExtractTextPlugin(
      { 
       filename: '[name]-[chunkhash].css', 
       disable: false, 
       allChunks: true 
      } 
     ) 
    ] 

}; 

Answer 1

Versuchen Sie, diese zu nutzen:

{ 
    test: /\.scss$/, 
    use: ['style-loader', 'css-loader', 'sass-loader'] 
} 

Ich bin auch auf einem derzeit Projekt Webpack 3 arbeiten. Vielleicht sehen Sie sich meine webpack.config.js an. Es funktioniert gut mit Sass.

Answer 2

Zuerst, wenn Sie aktualisieren, müssen Sie sicherstellen, dass Sie auch alle Lader aktualisieren. Wir haben damit ein Ende gefunden, das Ihrer Situation ähnlich ist. Ich hatte auch Schwierigkeiten, die Antwort zu finden.

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader'] 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'url-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    } 
} 

Wir fanden diesen Link sehr hilfreich:

https://github.com/webpack-contrib/extract-text-webpack-plugin