"You may need an appropriate loader to handle this file type" error

Question

I have created a set of components on higher version of react, bootstrap and webpack. I need to integrate the component in the project which is of older version. The older version does not have scss implementation whereas the newer version has. For the older version, reactstrap is used. I am getting the following error when I start the server for the scss files. "You may need an appropriate loader to handle this file type"

React 16.2.0 -> React 15.0.1
bootstrap 4.0.0 -> bootstrap 3.3.7 
webpack 3.10.0 -> webpack 1.12.14

package.json

{
"version": "1.0.0",
"description": "New ReactJS",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p",
"test:watch": "npm test -- --watch",
"lint": "eslint app/.; exit 0",
"fix": "eslint --fix app/.; exit 0"
},
"keywords": "[]",
"dependencies": {
"axios": "^0.11.1",
"base-64": "^0.1.0",
"chart.js": "^2.4.0",
"chart.piecelabel.js": "^0.9.0",
"d3": "^3.5.17",
"d3-scale": "^0.7.1",
"d3-shape": "^0.6.0",
"html2canvas": "^0.5.0-beta4",
"joi": "^8.4.2",
"joi-browser": "^8.4.0",
"jspdf": "^1.3.5",
"moment": "^2.18.1",
"prop-types": "^15.5.10",
"random-material-color": "^1.0.2",
"react": "^15.0.1",
"react-ace": "^5.4.0",
"react-autosuggest": "^7.0.1",
"react-bootstrap": "^0.29.4",
"react-bootstrap-date-picker": "^5.0.1",
"react-chartjs": "^0.8.0",
"react-d3-components": "^0.6.6",
"react-d3-library": "^1.1.8",
"react-dimensions": "^1.3.0",
"react-dom": "^15.0.1",
"react-faux-dom": "^3.0.1",
"react-modal": "^1.3.0",
"react-numeric-input": "^2.1.0",
"react-onclickoutside": "^6.4.0",
"react-redux": "^4.4.2",
"react-router": "^2.0.1",
"react-select": "^0.9.1",
"react-tabs": "^0.8.2",
"react-tagsinput": "^3.14.0",
"react-tooltip": "^3.2.2",
"react-twitter-widgets": "^1.7.1",
"redux": "^3.4.0",
"redux-thunk": "^2.0.1",
"socket.io-client": "^1.7.3",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.7.6",
"babel-eslint": "^6.0.0-beta.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"chai-immutable": "^1.5.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.23.1",
"css-hot-loader": "1.3.6",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"enzyme": "^2.3.0",
"eslint": "^2.7.0",
"eslint-config-standard": "^5.1.0",
"eslint-plugin-promise": "^1.1.0",
"eslint-plugin-react": "^4.3.0",
"eslint-plugin-standard": "^1.3.2",
"html-loader": "^0.4.5",
"html-webpack-include-assets-plugin": "0.0.5",
"html-webpack-plugin": "^2.15.0",
"ignore-styles": "^4.0.0",
"image-webpack-loader": "^1.8.0",
"jsdom": "^9.1.0",
"mocha": "^2.4.5",
"options": "0.0.6",
"react-addons-test-utils": "^15.1.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}

webpack.config.babel.js

import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import HtmlWebpackIncludeAssetsPlugin from 'html-webpack-include-assets- 
plugin'
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSCSS = new ExtractTextPlugin('[name].styles.css');


const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND

const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'dist'),
}

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: PATHS.app + '/index.html',
filename: 'index.html',
inject: 'body'
})

const COPYWebPackPluginConfig = new CopyWebpackPlugin([
{ from: PATHS.app+'/sharedStyles/customCSS.css', to: PATHS.build },
{ from: PATHS.app+'/sharedStyles/react-select.css', to: PATHS.build },
{ from: PATHS.app+'/sharedStyles/fixed-data-table.css', to: PATHS.build 
},
{ from: PATHS.app+'/constants/NetworkConstants.js', to: PATHS.build },
{ from: PATHS.app+'/assets/pulsar-icon.png', to: PATHS.build },

// { from: 
PATHS.app+'/../node_modules/bootstrap/dist/css/bootstrap.min.css', to: 
PATHS.build },
// { from: PATHS.app+'/constants/api.html', to: PATHS.build },

])

const HtmlWebpackIncludeAssetsPluginConfig = new 
HtmlWebpackIncludeAssetsPlugin({
files: ['index.html'],
assets: ['customCSS.css','react-select.css','fixed-data- 
table.css','NetworkConstants.js'],
append: true,
hash: true
})

const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})

const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle_[hash:8].js'
},
module: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' },
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName= 
[name]__[local]___[hash:base64:5]'},
//{test: /\.(jpe?g|png|gif|svg)$/i,loaders: ['url?limit=8192','img']}
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
}
]
},
resolve: {
root: path.resolve('./app'),
extensions: ["", ".ts", ".tsx", ".js", ".json"]
},
node: {
dns: 'empty',
net: 'empty'
},
}

const developmentConfig = {
module: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' },
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
//{test: /\.(jpe?g|png|gif|svg)$/i,loaders: ['url?limit=8192','img']}
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
devtool: 'cheap-module-inline-source-map',
devServer: {
contentBase: PATHS.build,
outputPath: PATHS.build,
hot: true,
inline: true,
progress: true,
},
plugins: [HTMLWebpackPluginConfig, 
COPYWebPackPluginConfig,HtmlWebpackIncludeAssetsPluginConfig, 
new webpack.HotModuleReplacementPlugin()]
}

const productionConfig = {
module: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' },
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
//{test: /\.(jpe?g|png|gif|svg)$/i,loaders: ['url?limit=8192','img']}
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
devtool: 'cheap-module-source-map',
plugins: [HTMLWebpackPluginConfig, productionPlugin, 
COPYWebPackPluginConfig, HtmlWebpackIncludeAssetsPluginConfig]
}

export default Object.assign({}, base, isProduction === true ? productionConfig : developmentConfig)

Please help. Thanks in advance.

Answer 1

You don't have sass-loader installed in your project and also sass-loader requires node-sass to be installed

Install npm package "node-sass" npm i node-sass --save-dev

and npm package "sass-loader" npm i sass-loader --save-dev

Then include this in your webpack file

{
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'style-loader',
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                },
            },
        ],
    };

And for production build use

{
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!sass-loader',
        }),
    };

Update: for Webpack 1

{
            test: /\.scss$/,
            loader: "style!css!sass"
}