我具有以下组件,导入了CSS和webpack配置-显然我已经导入了相关的CSS模块,但是我的react输出className={css__main.container}
和导入的CSS-loader之间的连接似乎不是由react-css_main.container没有映射到.main__container___2MJY
(它返回undefined
,因此react / webpack不包含在输出中)-我敢肯定,对于CSS模块来说,我只是错过了一步,谁能指出这可能是什么? ("css-loader": "^0.28.11"
已安装在package.json中)。
import React from 'react';
import {Route, browserHistory, Switch, Link, BrowserRouter, HashRouter} from 'react-router-dom';
import css__main from "../css/main.css";
import NoMatch from "./no-match.js";
import ButtonLink from "../components/buttonLink.js";
import List from "./lists/list-base.js";
import Home from "./subs/home.js";
class Main extends React.Component {
render(){
console.log( JSON.stringify( css__main ));
//[["./src/css/main.css",".main__container___2MJY_{border:1px solid #d0d0d0;-moz-box-shadow:0 0 8px #d0d0d0;box-shadow:0 0 8px #d0d0d0;overflow:hidden;height:80vh;display:flex;flex-direction:column;justify-content:flex-start}.main__header___3ZGBv{color:#444;background-color:transparent;border-bottom:1px solid #d0d0d0;font-size:1.2em;height:65px;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;padding:15px 20px}",""]]
return (
<div id="container" className={css__main.container}>
<div className={css__main.header}>
Flix AB Testing
</div>
<HashRouter history={browserHistory}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/active" component={List}/>
<Route path="/inactive" component={List}/>
<Route path="/expire" component={List}/>
<Route path="/delete" component={List}/>
<Route component={NoMatch}/>
</Switch>
</HashRouter>
</div>
);
};
}
export default Main;
导入此CSS(我可以将其输出到控制台,如上面的代码块所示):
.container {
border: 1px solid #D0D0D0;
-moz-box-shadow: 0 0 8px #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
overflow: hidden;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.header {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 1.2em;
height: 65px;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
padding: 15px 20px;
}
我的webpack配置。如下:
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
minimize: true,
camelCase: 'dashes',
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
答案 0 :(得分:3)
好的-这样就可以按照以下方式工作。最后一步是同时包含style-loader
和css-loader
。我已经读过其他地方,这些地方不需要将模块设置为true,因此必须做进一步的研究。
我认为拥有更多知识的人(或者,当我进一步提高速度时,我会)可以将一些零散的东西绑在一起-但这将在您遇到与我相同的问题时起作用。
我已经用:local(myclass){/ 这里的一些CSS /}包围了我的css类,以便暂时了解本地范围,直到我理解得更好为止。
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
minimize: true,
camelCase: 'dashes',
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
如果您不担心这些选项,则以下替代方法最简单。
{
use: ['style-loader', 'css-loader']
}