我正在尝试使用css模块内部反应,但它无法正常工作。
此代码的日志:
import React from 'react'
import styles from '../../css/test.css'
class Test extends React.Component {
render() {
console.log(styles)
return (
<div className={styles.app}>
<p>This text will be blue</p>
</div>
);
}
}
export default Test
返回Object {}
,呈现的代码是没有类的标签:
<div><p>This text will be blue</p></div>
网站上提供了css代码,这是我的test.css:
.test p {
color: blue;
}
如果我将div改为class =&#39; test&#39;,则p的颜色变为蓝色
这是我的webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader',
query: {
name: '/static/img/[name].[ext]'
}
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
},
}
}
任何人都可以帮助我吗?
提前致谢。
答案 0 :(得分:0)
看起来你将css-loader参数传递给resolve-url-loader:
"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"
应该是:
"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"
答案 1 :(得分:0)
自这个问题以来已经过了很多时间,所以我的webpack用其他技术多次更新。
此webpack配置正在运行:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
我想在webpack中使用此行存在旧版本的问题:
NSAttributedStringKey
尝试importLoaders和importLoader
您也可以看到我的repo。
答案 2 :(得分:0)
在我的特定情况下,我使用的是官方实用程序facebook/create-react-app
。您必须运行以下命令才能访问Webpack配置:
npm run eject
然后,您需要编辑config/webpack.config.js
并将css-loader modules
选项设置为true
。
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true <-----
}),