Commonjs : during the build, How to change the extension of file - reactjs

Question

I am able to transpile scss file to css file but the only importing is not working during the build. since *.js its importing a .scss file. I tried replacing .scss with .css during the build.
js still has references to scss files which do not exist in the dist folder as all scss there is distributes as normal css
error :
ERROR in ./src/Checkbox/Checkbox.js
Module not found: Error: Can't resolve './Checkbox.css' in '/src/Checkbox'
# ./src/Checkbox/Checkbox.js 36:0-22
# ./src/index.js**
src/checkbox.js
'use strict';
import {Checkbox} from 'semantic-ui-react';
import * as React from 'react';
import PropTypes from 'prop-types';
// Style
import './Checkbox.scss';
react code...
dist/checkbox.js transpiled JS file (looks like )
var _propTypes2 = _interopRequireDefault(_propTypes);
require('./Checkbox.scss');
**I am expecting require('./Checkbox.css');**
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
and so on ...
*.js its importing a .scss file. I tried replacing .scss with .css during the build
my webpack.config.js
const webpack = require('webpack')
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLESS_checkbox = new ExtractTextPlugin({
filename: 'component/Checkbox.css',
allChunks: true
});
const config = {
entry : {
index:'./src/index.js'
},
output : {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
pathinfo: true
},
devtool: 'source-map',
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
//enforce: 'pre',
exclude: /node_modules/,
}, {
test: /\.scss$/,
enforce: 'pre',
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
['css-loader', 'resolve-url-loader', 'sass-loader']})
]
},
plugins: [
extractLESS_checkbox
],
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
};
module.exports = config;
my package.json
"name": "name",
"version": "0.1",
"description": "Elements",
"author": "dg",
"license": "ISC",
"jsnext:main": "dist/es/index.js",
"main": "dist/commonjs/index.js",
"module": "dist/es/index.js",
"scripts": {
"build": "npm run build:commonjs && npm run build:es",
so on ....
}
"dependencies" : { ...}
"devDependencies" : {... }
Am I doing something wrong, Please suggest me

Answer 1

Use Extract text plugin
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
},
}, {
loader: 'sass-loader',
options: {
sourceMap: true
},
}, {
loader: 'import-glob-loader',
},
]
})
Should look something like this