0

我的反应构建遇到了一个有趣的错误。我的配置在我的 Mac 上运行良好，但在我的 Windows 10 计算机上运行时出现以下错误：

ERROR in ./~/react-toolbox/lib/app_bar/theme.css
Module parse failed: C:\cygwin64\home\username\projectname\node_modules\react-toolbox\lib\app_bar\theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
|   --palette-red-50: rgb(255, 235, 238 );
|   --palette-red-100: rgb(255, 205, 210);
@ ./~/react-toolbox/lib/app_bar/index.js 16:13-35
@ ./src/containers/app/app.js
@ ./src/index.js
@ multi react-hot-loader/patch ./src/index.js

这是我的 Webpack 2 配置

'use strict'
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const postcssImport = require('postcss-import')
const postcssCssnext = require('postcss-cssnext')

// configure source and distribution folder paths
const publicFolder = 'public'
const buildFolder = 'build'

module.exports = {
  entry: {
    'app': [ 
      'react-hot-loader/patch',
      './src/index.js' 
    ]
  },
  resolve: {
    //Allows us to leave off the file extension when importing
    extensions: ['.js', '.json', '.jsx']
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: 'eslint-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: '/node_modules/',
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        include: [ 
          /(node_modules)\/react-toolbox/,
          path.join(__dirname, 'src')
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                sourceMap: true,
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: 'inline',
                plugins: function() {
                  return [
                    postcssImport({ addDependencyTo: webpack }),
                    postcssCssnext({
                      browsers: ['last 2 versions', '> 5%'],
                      compress: true,
                    })
                  ]
                },
              }, 
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].bundle.css',
      allChunks: true
    }),
    new CopyWebpackPlugin([{
      from: path.join(__dirname, publicFolder, 'index.html'),
      to: path.join(__dirname, buildFolder, 'index.html')
    }]),
    new CopyWebpackPlugin([{
      from: path.join(__dirname, publicFolder, 'demo.html'),
      to: path.join(__dirname, buildFolder, 'demo.html')
    }]),
    new CopyWebpackPlugin([{
      from: path.join(__dirname, publicFolder, 'demo.js'),
      to: path.join(__dirname, buildFolder, 'demo.js')
    }]),
    new webpack.NamedModulesPlugin()
  ],

  output: {
    path: path.resolve(__dirname, buildFolder),
    filename: '[name].js',
    publicPath: '/'
  },

  devtool: 'eval',

  devServer: {
    // files are served from this folder
    contentBase: path.join(__dirname, 'build'),

    // support HTML5 History API for react router
    historyApiFallback: true,

    // listen to port 5000, change this to another port if another server 
    // is already listening on this port
    port: 5000,

    //match the output 'publicPath'
    publicPath: '/',

    //Proxies to match requests to our Django API endpoints
    proxy: {
      '/api': {
        target: 'http://localhost:4000'
      }
    },
    hot: true
  }
}

为了更好的衡量，这是我的 .babelrc 配置

{
  "presets": [
    [ "es2015", { "modules": false } ],
    "latest",
    "react"
  ],
  "plugins": ["react-hot-loader/babel", "syntax-dynamic-import"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

不知道为什么在 Windows 10 上编译时会出现错误，但在我的 Mac 上运行良好。对于 PostCSS 或 Webpack 2，我似乎找不到有关此问题的任何当前信息。

有任何想法吗？

4

1 回答 1

0

只需删除

include: [ 
          /(node_modules)\/react-toolbox/,
          path.join(__dirname, 'src')
        ]

从test: /\.css$/规则

于 2017-04-25T17:24:13.437 回答