I have created a set of ponents on higher version of react, bootstrap and webpack. I need to integrate the ponent 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-ponents": "^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.
I have created a set of ponents on higher version of react, bootstrap and webpack. I need to integrate the ponent 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-ponents": "^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.
Share Improve this question asked May 22, 2018 at 4:38 JivanJivan 5681 gold badge5 silver badges16 bronze badges 1-
npm install gatsby-plugin-sass --save-devand these steps worked for me when using Gatsby: stackoverflow./a/57607786/470749 – Ryan Commented May 15, 2020 at 14:34
1 Answer
Reset to default 12You 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"
}