我想在React中使用GoGO模板，但是我有这个问题。
Uncaught Error: Module parse failed: Unexpected token (29:12)
You may need an appropriate loader to handle this file type.
|
| var render = function render() {
> var css = import('./assets/css/sass/themes/gogo.' + color + '.scss').then(function (x) {
| var MainApp = require('./App').default;
|
at eval (index.js:1)
at Object../src/index.js (main.f444d441.js:6169)
at __webpack_require__ (main.f444d441.js:724)
at fn (main.f444d441.js:101)
at eval (webpack:///multi_(:3005/webpack)-dev-server/client?:5:18)
at Object.0 (main.f444d441.js:6180)
at __webpack_require__ (main.f444d441.js:724)
at main.f444d441.js:791
at main.f444d441.js:794
我尝试了不同的方法，但无法解决此问题。
这是到源代码页面的链接。 https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383/comments?page=5
webpack.config.js
'use strict';
/**
* Webpack Config
*/
const path = require('path');
const fs = require('fs');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// plugins
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
// the path(s) that should be cleaned
let pathsToClean = [
'dist',
'build'
]
// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false
}
module.exports = {
entry: ["babel-polyfill", "react-hot-loader/patch", "./src/index.js"],
output: {
// The build folder.
path: resolveApp('dist'),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'assets/js/[name].[hash:8].js',
chunkFilename: 'assets/js/[name].[hash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
devServer: {
contentBase: './src/index.js',
compress: true,
port: 3005, // port number
historyApiFallback: true,
quiet: true
},
// resolve alias (Absolute paths)
resolve: {
alias: {
Components: path.resolve(__dirname, 'src/components/'),
Containers: path.resolve(__dirname, 'src/containers/'),
Assets: path.resolve(__dirname, 'src/assets/'),
Util: path.resolve(__dirname, 'src/util/'),
Routes: path.resolve(__dirname, 'src/routes/'),
Constants: path.resolve(__dirname, 'src/constants/'),
Redux: path.resolve(__dirname, 'src/redux/'),
Data: path.resolve(__dirname, 'src/data/')
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
// Scss compiler
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"style-loader",
// "postcss-loader"
]
},
// {
// test: /\.scss$/,
// use: ExtractTextPlugin.extract({
// use: [{
// loader: "css-loader"
// }, {
// loader: "sass-loader"
// }],
// fallback: "style-loader"
// })
// }
// {
// test: /\.scss$/,
// use: [
// 'style-loader',
// 'css-loader',
// 'postcss-loader',
// 'sass-loader',
// 'postcss-loader'
// {
// loader: 'sass-resources-loader',
// options: {
// // Provide path to the file with resources
// resources: 'src/assets/css/sass/themes/gogo.light.purple.scss',
//
// // Or array of paths
// // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
// },
// },
// ],
// },
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
performance: {
hints: process.env.NODE_ENV === 'production' ? "warning" : false
},
plugins: [
new CopyWebpackPlugin([
{from:'src/assets/img',to:'assets/img'},{from:'src/assets/fonts',to:'assets/fonts'}
]),
new FriendlyErrorsWebpackPlugin(),
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: './public/favicon.ico'
}),
new MiniCssExtractPlugin({
filename: "assets/css/[name].[hash:8].css"
})
]
};
package.json
{
"name": "gogo-react",
"version": "2.0.2",
"description": "Gogo - React Bootstrap 4 Admin Dashboard Template",
"scripts": {
"start": "webpack-dev-server --mode development --hot --progress --open",
"build": "webpack --mode production"
},
"keywords": [
"reactjs"
],
"author": "Colored Strategies",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^2.0.0",
"eslint": "^4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.47.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.8.2",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-hot-loader": "^4.1.3",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.0.1",
"webpack": "^4.27.1",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"@date-io/moment": "0.0.2",
"availity-reactstrap-validation": "^2.0.4",
"axios": "^0.18.0",
"chart.js": "^2.7.2",
"chartjs-plugin-datalabels": "^0.3.0",
"classnames": "2.2.6",
"draft-js": "^0.10.5",
"fine-uploader": "^5.16.2",
"firebase": "^5.3.0",
"formik": "^1.5.4",
"install": "^0.12.2",
"jalali-moment": "^3.3.1",
"jwt-decode": "^2.2.0",
"material-ui": "^0.20.2",
"material-ui-persian-date-picker-utils": "^0.1.2",
"material-ui-pickers": "^2.0.4",
"moment": "^2.22.2",
"npm": "^6.5.0",
"postcss-loader": "^3.0.0",
"rc-slider": "^8.6.1",
"rc-switch": "^1.6.0",
"react": "^16.4.1",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.2",
"react-block-ui": "^1.1.3",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-contextmenu": "^2.9.4",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-fine-uploader": "^1.1.0",
"react-headroom": "^2.2.4",
"react-intl": "2.4.0",
"react-lines-ellipsis": "^0.13.2",
"react-loadable": "5.4.0",
"react-mousetrap": "^0.2.0",
"react-perfect-scrollbar": "^1.1.1",
"react-quill": "^1.3.1",
"react-rater": "^5.0.3",
"react-redux": "5.0.7",
"react-router-dom": "^4.2.2",
"react-scroll-to-component": "^1.0.2",
"react-select": "^2.0.0-beta.7",
"react-sortablejs": "^1.3.6",
"react-table": "^6.8.6",
"react-tagsinput": "^3.19.0",
"react-transition-group": "^1.2.0",
"reactstrap": "^6.5.0",
"redux": "4.0.0",
"redux-saga": "^0.16.0",
"sass-resources-loader": "^2.0.0",
"sortablejs": "^1.6.1",
"style-loader": "^0.23.1",
"sweetalert2": "^8.8.7",
"video.js": "^7.3.0",
"yup": "^0.27.0"
}
}
请帮助我，谢谢。
答案 0 :(得分：0)
如果您正在使用react的最新版本，则无需在loader文件中设置webpack.config.js。
您可以直接执行此操作
npm install sass-loader
您就可以开始在项目中使用scss文件了。
答案 1 :(得分：0)
这与文件开头的点被他的操作系统隐藏并且无法复制它们有关。
在项目目录中应该有一个“ .babelrc”和“ .eslintrc”文件，如果缺少“ .babelrc”文件，则会出现问题。也许您有空的时候也应该检查一下。