logo标签列表

你可能需要一个适当的加载器来处理此文件类型错误。

javascriptreactjswebpackbabeljs
10

我已经用更高版本的React、Bootstrap和Webpack创建了一组组件。现在我需要将这些组件集成到一个旧版本的项目中。但是旧版本没有scss实现，而新版本有。在旧版本中，使用的是reactstrap。当我启动包含scss文件的服务器时，会出现以下错误： "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)

请帮忙。提前感谢。

npm install gatsby-plugin-sass --save-dev 这是一个与 Gatsby 相关的编程内容，这些步骤对我很有用：https://dev59.com/vqvka4cB1Zd3GeqPycjr#57607786 - Ryan
1个回答
11

您的项目中没有安装sass-loader，而且sass-loader需要安装node-sass。

安装npm软件包"node-sass" npm i node-sass --save-dev

和npm软件包"sass-loader" npm i sass-loader --save-dev

然后在您的webpack文件中包含此内容。

{
        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',
        }),
    };

更新：Webpack 1 版本

{
            test: /\.scss$/,
            loader: "style!css!sass"
}
谢谢提供的步骤。我已经按照步骤操作了，但是现在出现了另一个错误。错误：加载器列表中的元素应该具有“loader”或“loaders”字段之一。 - Jivan
@Jivan 这是因为你正在使用较旧的 webpack 版本。我发布的代码适用于 2 及以上版本。抱歉，我忘记检查你的 webpack 版本了。 - Gautam Naik
@Jivan，请现在检查答案。 - Gautam Naik
1
@Jivan 如果这个答案对您有帮助，请接受它。 - Gautam Naik
生产使用的规则是什么？ - AlwaysLearning
@AlwaysLearning 生成 CSS 文件 - Gautam Naik
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接