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語法錯誤

回答

相關問題