Javascript &引用；您可能需要适当的加载程序来处理此文件类型；错误

我已经在更高版本的react、bootstrap和webpack上创建了一组组件。我需要在项目中集成旧版本的组件。旧版本没有scss实现，而新版本有。对于旧版本，使用reactstrap。当我为scss文件启动服务器时，出现以下错误。 “您可能需要适当的加载程序来处理此文件类型”

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)

请帮忙。

---

提前感谢。

您的项目中没有安装sass loader，而且sass loader需要安装节点sass

安装npm包“节点sass”

npm i节点sass——保存开发

和npm包“sass加载器”
npm i sass加载器--保存开发

然后将其包含在您的网页包文件中

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

用于生产和建造使用

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

更新：第1页

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

谢谢你的步骤。我做到了，但现在又犯了另一个错误。错误：加载程序列表中的元素应该有一个字段“loader”或“loaders”@Jivan，这是因为，您使用的是旧版本的webpack。我发布的代码是版本2及以上的。对不起，我忘了检查你的网页version@Jivan核对答案now@Jivan如果这个答案对你有帮助，那么请接受它
npm安装gatsby插件sass--save dev
，这些步骤在使用gatsby时对我有效：
{
            test: /\.scss$/,
            loader: "style!css!sass"
}