Я создал набор компонентов для более высокой версии реакции, начальной загрузки и веб-пакета.Мне нужно интегрировать компонент в проект, который имеет более старую версию.Более старая версия не имеет реализации scss, тогда как более новая версия имеет.Для более старой версии используется реактивная лента.Я получаю следующую ошибку при запуске сервера для файлов scss. "Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов"
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)
Пожалуйста, помогите.Заранее спасибо.