Babel导入CSS语法错误

Question

I want to be able to use import in my react application for not only js/jsx files but also for css files. 我希望能够在我的React应用程序中不仅对js / jsx文件而且对css文件使用import 。 From what I've read, the best way to do that is to use the extract-text-webpack-plugin which will take your imported css files and bundle them together. 据我所读，最好的方法是使用extract-text-webpack-plugin ，它将extract-text-webpack-plugin导入的CSS文件并将它们捆绑在一起。

I've set it up so that its generating my bundled css file, but for some reason every time I load my page I get a syntax error: 我已经对其进行了设置，以使其生成捆绑的css文件，但是由于某种原因，每次加载页面时，都会出现语法错误：

SyntaxError: MyWebpage/views/global.css: Unexpected token, expected ; (1:5)
> 1 | body {
    |      ^
  2 |     margin: 0;
  3 | }

My setup looks like this: 我的设置如下所示：

webpack.config.js webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


const config = {
  entry: ['babel-polyfill', './views/Index.jsx'],
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public'
  },
  module: {
    rules: [
      { test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' },
      { 
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
};

module.exports = config;

The entry point ./views/Index.js is where I'm importing my css file: 入口点./views/Index.js是我导入CSS文件的位置：

Index.js Index.js

import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';

class Index extends React.Component {
  render() {
    return (
        <Layout title={this.props.title}>
            <PageContent />
        </Layout>
    );
  }
}

export default Index;

Inside the imported ./Layout.jsx file I'm using a <link> to include the bundled css file in my page: 在导入的./Layout.jsx文件中，我正在使用<link>在页面中包含捆绑的CSS文件：

Layout.jsx Layout.jsx

import React from 'react';

class Layout extends React.Component {
    render() {
        return (
            <html>
            <head>
                <title>{this.props.title}</title>
                <link rel="stylesheet" href="styles.css" />
            </head>
            <body> 
                <div id="root">
                    {this.props.children}
                </div>
                <script type="text/javascript" src="./bundle.js"></script>
            </body>
            </html>
        );
    }
}

export default Layout;

I'm pretty confused because it seems like my app is building fine, but when I try to access my webpage I keep getting a syntax error. 我很困惑，因为看来我的应用程序运行良好，但是当我尝试访问我的网页时，我总是收到语法错误。

Can anyone please help me understand what I'm doing wrong? 谁能帮我了解我在做什么错？

Answer 1

It seems problem with loaders below is example of webpack.config.js file working for jsx and css loaders : 以下似乎是加载程序存在的问题是适用于jsx和CSS加载程序的webpack.config.js文件的示例：

module.exports = {
    entry: './app/index.js',
    output: {
        path: __dirname,
        filename: 'dist/bundle.js'
    },
    devServer: {
        inline: true,
        port: 3000
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react', 'react-hmre']
            }
        },
        {
                test: /\.scss$/,
                loaders: [ 'style', 'css', 'sass' ]
            }]
    }
};

Answer 2

it seems like babel or webpack is not loading the loaders. 看来babel或webpack没有加载加载程序。

This variant helps me with it (just include into webpack.config.js): 这个变体可以帮助我（仅包含在webpack.config.js中）：

    require.extensions['.css'] = () => {
      return;
    };

More here... [link] 更多内容... [链接]

Babel导入CSS语法错误

问题描述

2 个解决方案

解决方案1
0 2017-09-15 09:54:12

解决方案2
0 2018-08-17 10:38:01

Babel导入CSS语法错误

问题描述

2 个解决方案

解决方案1 0 2017-09-15 09:54:12

解决方案2 0 2018-08-17 10:38:01

解决方案1
0 2017-09-15 09:54:12

解决方案2
0 2018-08-17 10:38:01