Babel import css Синтаксическая ошибка

Я хочу быть в состоянии использовать import в моем приложении реагировать не только на файлы js/jsx, но и на файлы css. Из того, что я прочитал, лучший способ сделать это - использовать extract-text-webpack-plugin который возьмет ваши импортированные CSS-файлы и свяжет их вместе.

Я настроил его так, чтобы он генерировал мой css-файл, но по какой-то причине каждый раз, когда я загружаю свою страницу, я получаю синтаксическую ошибку:

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

Моя установка выглядит так:

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;

Точка входа ./views/Index.js где я импортирую свой CSS-файл:

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;

Внутри импортированных ./Layout.jsx файл, который я использую <link> включить файл css в комплекте на моей странице:

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;

Я немного сбит с толку, потому что кажется, что мое приложение работает нормально, но когда я пытаюсь получить доступ к своей веб-странице, я получаю синтаксическую ошибку.

Может кто-нибудь помочь мне понять, что я делаю не так?

Источник

2 ответа

Кажется, проблема с загрузчиками ниже - это пример файла webpack.config.js, работающего для загрузчиков jsx и css:

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' ]
            }]
    }
};
Источник

Похоже, что babel или webpack не загружают загрузчики.

Этот вариант помогает мне в этом (просто включите в webpack.config.js):

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

Подробнее здесь... [ссылка]

Источник
Другие вопросы по тегам