问题描述
限时送ChatGPT账号..我正在尝试在 react 中使用 css 模块,但它不起作用.
这段代码的日志:
从 'react' 导入 React从../../css/test.css"导入样式类测试扩展了 React.Component {使成为() {控制台日志(样式)返回 (<div className={styles.app}><p>此文本将是蓝色的</p>);}}导出默认测试
返回对象{}
并且呈现的代码是没有类的标签:
<div><p>此文本将是蓝色的</p></div>
css 代码可在网站上找到,这是我的 test.css:
.test p {颜色:蓝色;}
如果我把 div 改成 class='test',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")函数_路径(p){返回 path.join(__dirname, p);}模块.出口 = {上下文:__dirname,入口: ['./assets/js/index'],输出: {路径:path.resolve('./assets/bundles/'),文件名:'[名称].js'},devtool: 'inline-eval-cheap-source-map',插件: [新的 BundleTracker({filename: './webpack-stats.json'}),新的 webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}),新的快乐包({id: 'jsx',线程:4,装载机:["babel-loader"]}),new ExtractTextPlugin("[name].css", { allChunks: true })],模块: {装载机: [{测试:/\.css$/,包括: path.resolve(__dirname, './assets/css/'),loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")},{测试:/\.scss$/,包括: 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]")},{测试:/\.jsx?$/,包括: path.resolve(__dirname, './assets/js/'),排除:/node_modules/,装载机:[happypack/loader?id=jsx"]},{测试:/\.png$/,加载器:'文件加载器',询问: {name: '/static/img/[name].[ext]'}}]},解决: {模块目录:['node_modules'],扩展名:['','.js','.jsx'],别名:{'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')},}}
有人可以帮我吗?
提前致谢.
解决方案这个问题已经过去了很多时间,所以我的 webpack 用其他技术更新了很多次.
这个 webpack 配置正在运行:
<代码>...模块.出口 = {入口,输出: {文件名:'[名称].js',路径:path.resolve(__dirname, 'dist'),公共路径:'/'},开发工具:process.env.NODE_ENV === '生产' ?'源图':'内联源图',模块: {规则: [{测试:/\.jsx?$/,包括: path.resolve(__dirname, './app/view/'),排除:/node_modules/,loader: 'babel-loader'},{测试:/\.pcss$/,包括: path.resolve(__dirname, './app/view/'),用: [{装载机:'风格装载机'},{装载机:'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'},{loader: 'postcss-loader',选项: {插件:函数(){返回 [require('postcss-import'),要求('postcss-mixins'),要求('postcss-cssnext')({浏览器:['最后 2 个版本']}),require('postcss-嵌套'),require('postcss-brand-colors')];}}}],排除:/node_modules/},{测试:/\.(png|svg|jpg|webp)$/,用: {加载器:'文件加载器'}}]},解决: {扩展名:['.js', '.jsx'],模块:[path.resolve(__dirname, 'node_modules')]},插件};
我猜 webpack 上的旧版本有问题,下面这行:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
试试 importLoaders 和 importLoader
你也可以看到我的repo.
I am trying to use css modules inside react, but it is not working.
The log of this code:
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
returns Object {}
and the rendered code are tags with no class:
<div><p>This text will be blue</p></div>
The css code is available at site, here is my test.css:
.test p {
color: blue;
}
If I changed the div to have class='test', the color of p changes to blue
Here is my 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')
},
}
}
Can anyone help me?
Thanks in advance.
解决方案A lot of time passed since this question, so my webpack was update many times with another technologies.
This webpack config is working:
...
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool:
process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './app/view/'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
include: path.resolve(__dirname, './app/view/'),
use: [
{
loader: 'style-loader'
},
{
loader:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-nested'),
require('postcss-brand-colors')
];
}
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|webp)$/,
use: {
loader: 'file-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')]
},
plugins
};
I guess that there is an issue with older versions at webpack with this line:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
Try importLoaders and importLoader
You can see my repo too.
这篇关于css模块对象导入返回空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论