Babel import css语法错误

我希望能够在我的反应应用程序中使用import不仅用于js/jsx文件，还用于css文件。从我读过的文档中，最好的方法是使用extract-text-webpack-plugin这将把你的导入的CSS文件并捆绑在一起。Babel import 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;

我很困惑，因为它看起来像我的应用程序构建好，b当我尝试访问我的网页时，我不断收到语法错误。

任何人都可以请帮我理解我做错了什么吗？

来源

2017-09-15 MarksCode

看来下面装载机问题是例如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' ] 
      }] 
    } 
};

来源

2017-09-15 09:54:12 RVCoder

Babel import css语法错误

回答

相关问题