CSS模塊：語法錯誤

這裏是一個組件導入CSS ...CSS模塊：語法錯誤

import React from 'react'; 
import styles from './sample.css'; 

class Index extends React.Component { 

    render(){ 
     return (
      <div> 

       <div className="${styles.bodywrap}"></div> 

      </div> 

     ); 
    } 
} 

export default Index;

我的樣式表sample.css如下...

.bodywrap { 
    color:red; 
}

但是當我運行的Web應用程序我得到以下錯誤...

SyntaxError: C:/Users/Eric/Desktop/tutorHub/components/index_components/sample.c 
ss: Unexpected token (1:0) 
> 1 | .bodywrap { 
    |^
    2 | color:red; 
    3 | }

我跟着instuctions設置CSS模塊，所以我webpack.config看起來如下...

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

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: "./main.js", 
    output: { 
     path: '/', 
     filename: 'index.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query:{ 
        presets: ['es2015','react'], 
       } 
      }, 
      { 
     test: /\.css/, 
     loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 
     } 


     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin("styles.css"), 
     new webpack.optimize.OccurrenceOrderPlugin() 
    ] 
};

任何想法爲什麼我的CSS沒有被正確讀取？我是否需要轉換代碼才能正確識別代碼？

編輯

我認爲它給我上面呈現的組件通過使用節點JS服務器節點重要...

var express = require('express'); 
var router = express.Router(); 
var React = require('react'); 
var reactDom = require('react-dom/server'); 
var App = React.createFactory(require('../components/index')); 
var MasterLayout = React.createFactory(require('../master/links')); 

router.get('/', function(req,res) { 
    var reactHtml = reactDom.renderToString(App({})); 
    var styles = reactDom.renderToString(MasterLayout({})); 
    res.render('../../tutorHub/index.jade', {reactOutput: reactHtml, links: styles}); 

});

可以這樣用CSS干擾？

來源

2016-08-13 Bolboa

嘗試安裝'style-loader'，然後將它添加到'ExtractTextPlugin.extract'類似t他的'ExtractTextPlugin.extract（'style'，'css？modules＆importLoaders = 1＆localIdentName = [name] __ [local] ___ [hash：base64：5]'）' –

在你webpack.config.js添加此裝載機： -

{ 
    loaders: [ 
    { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
}

添加在你的組件補充一點： -

import 'yourPath.css';

此css文件的使用類別只寫

<div className="yourClassName" />

來源

2016-08-13 10:02:55

請閱讀如何格式化您的帖子，特別是代碼部分。 – 2016-08-13 10:16:36

爲什麼添加字體加載器？ – Aprillion

試過這個，不行 – Bolboa

CSS模塊：語法錯誤

回答

相關問題