css 模块未被读取:语法错误
css module not being read: Syntax Error
这是一个组件导入 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 | }
我按照说明设置了 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 没有被正确读取吗?我需要一些东西来转换代码以便正确识别吗?
编辑
我认为我使用 node js 通过服务器渲染上面的组件对 node 很重要...
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 吗?
在您的 webpack.config.js 中添加此加载器 :-
{
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
在你的组件中添加:-
import 'yourPath.css';
要使用 类 这个 css 文件只需写
<div className="yourClassName" />
这是一个组件导入 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 | }
我按照说明设置了 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 没有被正确读取吗?我需要一些东西来转换代码以便正确识别吗?
编辑
我认为我使用 node js 通过服务器渲染上面的组件对 node 很重要...
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 吗?
在您的 webpack.config.js 中添加此加载器 :-
{
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
在你的组件中添加:-
import 'yourPath.css';
要使用 类 这个 css 文件只需写
<div className="yourClassName" />