React JS react-active-carousel未随Webpack一起加载

如何解决React JS react-active-carousel未随Webpack一起加载

我正在为我的项目使用React Responsive Carousel，但是在控制台中出现此错误

ROR in ./node_modules/react-responsive-carousel/lib/styles/carousel.min.css 1:0

模块解析失败：意外令牌（1：0） 您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders

.carousel .control-arrow，.carousel.carousel-slider .control-arrow {-webkit-transition：所有.25s缓入； -moz-transition：所有.25s缓入; -ms-transition：全部.25s缓入; -o过渡：全部.25s缓入;过渡：全部.25s缓入;不透明度：.4;过滤器：alpha（不透明度= 40）;位置：绝对; z指数： 2; top：20px; background：none; border：0; font-size：32px; cursor：pointer} .carousel .control-arrow：hover {opacity：1; filter：alpha（opacity = 100）}。carousel .control -arrow：before，.carousel.carousel-slider .control-arrow：before {margin：0 5px; display：inline-block; border-top：8px实心透明; border-botto

我的webpack配置为：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const path = require('path')

const rootPath = path.join(__dirname,'..','')

module.exports = {
  entry: {
    main: './src/index.js',},output: {
    filename: 'bundle.js',path: path.resolve(__dirname,'dist'),publicPath: '/',devServer: {
    historyApiFallback: true,contentBase: path.join(__dirname,plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',template: path.join(rootPath,'index.html'),}),new CopyPlugin({
      patterns: [
        { from: 'src/assets',to: 'assets' },],module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',{
        test: /\.html$/,use: [
          {
            loader: 'html-loader',{
        test: /\.s[ac]ss$/i,use: [
          // Creates `style` nodes from JS strings
          'style-loader',// Translates CSS into CommonJS
          'css-loader',// Compiles Sass to CSS
          'sass-loader',{
        test: /^(?!.*\.spec\.js$).*\.js$/,use: [
          'babel-loader',{
            loader: 'eslint-loader',options: {
              quiet: true,{
        test: /\.(woff|woff2)$/,use: {
          loader: 'url-loader',{
        test: /\.(woff2|woff)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loaders: ['url-loader?limit=10000&minetype=application/font-woff&name=/fonts/[name].[ext]'],include: /fonts/,{
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loaders: ['url-loader?name=/fonts/[name].[ext]'],{
        test: /\.(jpe?g|png|gif|svg|ico)$/i,loaders: [
          'file-loader?hash=sha512&digest=hex&name=[name].[ext]','image-webpack-loader?bypassOnDebug=false&optimizationLevel=7&interlaced=false',include: /images/,}

解决方法

您的模式/\.s[ac]ss$/i似乎不符合css扩展名。尝试将s标记为可选，例如：

test: /\.s?[ac]ss$/i,

或者通过将scss|sass中的css拆分为新的css来使其更干净：

test: /\.(s[ac]ss|css)$/i,