webpack sass-loader not generating css - css

Question

I can't figure out how to render css with the webpack sass-loader.
App.js file:
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 file:
import React, { Component } from 'react';
import './Test.scss';
class Test extends Component {
render() {
return (
<p className="intro">
Test
</p>
);
}
}
export default Test;
Test.scss file:
.intro{
background-color: #dddddd;
color: red;
}
webpack.config.dev.js file:
{
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
}]
}
Image:
Result
Expected
I'm doing something wrong with the sass loader. What is it? Please help.
{
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]',
},
}
I added /.scss$/ here, the code is running successfully， thank you all

Answer 1

This is how I use sass-loader together with the help of extract-text-webpack-plugin to create a separate file instead of just including it to bundle.js file.
I'm using 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'),
]
and import it to my index.js, like so:
import '../public/assets/sass/style.scss';