webpack sass-loaderがcssを生成しない

Question

webpack sass-loaderでCSSをレンダリングする方法を理解できません。

App.jsファイル：

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Test from "./Test"; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
      <Test /> 
     </div> 
    ); 
    } 
} 

export default App; 

Test.jsxファイル：

import React, { Component } from 'react'; 
import './Test.scss'; 

class Test extends Component { 
    render() { 
     return (
      <p className="intro"> 
       Test 
      </p> 
     ); 
    } 
} 

export default Test; 

Test.scssファイル：

：

.intro{ 
    background-color: #dddddd; 
    color: red; 
} 

ファイルwebpack.config.dev.js

{ 
      test: /\.css$/, 
      use: [ 
       require.resolve('style-loader'), 
       { 
        loader: require.resolve('css-loader'), 
        options: { 
         importLoaders: 1, 
        }, 
       }, 
       { 
        loader: require.resolve('postcss-loader'), 
        options: { 
         ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options 
         plugins:() => [ 
          require('postcss-flexbugs-fixes'), 
          autoprefixer({ 
           browsers: [ 
            '>1%', 
            'last 4 versions', 
            'Firefox ESR', 
            'not ie < 9', // React doesn't support IE8 anyway 
           ], 
           flexbox: 'no-2009', 
          }), 
         ], 
        }, 
       }, 
      ], 
     }, 
     { 
      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 
      }] 
     } 

画像：

期待
結果

私はSASSローダーと間違って何かをやっています。それは何ですか？助けてください。

 { 
      exclude: [ 
       /\.html$/, 
       /\.(js|jsx)$/, 
       /\.css$/, 
       /\.scss$/, 
       /\.json$/, 
       /\.bmp$/, 
       /\.gif$/, 
       /\.jpe?g$/, 
       /\.png$/, 
      ], 
      loader: require.resolve('file-loader'), 
      options: { 
       name: 'static/media/[name].[hash:8].[ext]', 
      }, 
     } 

私はあなたに感謝し、コードが正常に実行され、ここで/.scss$/を追加したすべての

Answer 1

私は別のファイルを作成するためにextract-text-webpack-pluginの助けを借りて一緒にsass-loaderを使用するだけではなく含めどのようにこれがありますそれはbundle.jsファイルです。

私はwebpack v2.6.1

// webpack-config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

    module: { 
      rules: [ 
       { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader']}) }, 
       { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader']}) }, 
      ], 
      }, 
plugins: [ 
    new ExtractTextPlugin('[name]-[chunkhash].css'), 
] 

を使用して、私のindex.jsにインポートし、そのようだ：

import '../public/assets/sass/style.scss';