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模块：语法错误

回答

相关问题