react.js - Reactjs 无法使用css样式

问题描述

问 题

项目用的是webpack2+sass+reactjs，但引用css或scss后，样式名写上没有样式，也不报错，不知道哪里出问题？大家能给指点下吗？
package.json配置清单里安装
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.28.0",
"jsx-loader": "^0.13.2",
"node-sass": "^4.5.1",
"proxy-middleware": "^0.15.0",
"react-addons-perf": "^15.4.2",
"react-hot-loader": "^1.3.1",
"sass": "^0.5.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8"

在webpack2的webpack.config.js关于css的部分配置如下：
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app/ldd/');
var APP_FILE = path.resolve(APP_PATH, 'app.jsx');

module.exports = {

devtool: 'eval-source-map',
entry: ['webpack/hot/dev-server', APP_FILE],
output: {
    path: __dirname + '/build',
    filename: 'bundle.js'

},

module: {

rules: [
    {
        test: /\.js$/,
        exclude: /^node_modules$/,
        use: 'babel-loader',
        include: [APP_PATH]
    },
      {
        test: /\.jsx$/,
        exclude: /^node_modules$/,
        use: ['jsx-loader', 'babel-loader'],
        include: [APP_PATH]
    },
    {
        test: /\.css$/,
        exclude: /^node_modules$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'autoprefixer-loader']
        }),
        include: [APP_PATH]
    },
    {
        test: /\.scss$/,
        exclude: /^node_modules$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader','sass-loader', 'autoprefixer-loader']
        }),
        include: [APP_PATH]
    },
    
    {   
        test: /\.(png|jpg)$/,
        exclude: /^node_modules$/,
        use: ExtractTextPlugin.extract({
            use: 'url-loader?limit=8192&name=imgs/[hash:8].[name].[ext]'
        }),
        include: [APP_PATH]
    },
    {
        test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
        exclude: /^node_modules$/,
        use: ExtractTextPlugin.extract({
            use: 'file-loader?name=[name].[ext]'
        }),
        include: [APP_PATH]
    }
]

},
plugins: [

new webpack.HotModuleReplacementPlugin()，
new ExtractTextPlugin('styles.css')

]

在tab.jsx里使用css，样式没有出来
import React from "react"
import TabsControl from "./common/tab.jsx"
import City from './evaluation.jsx'
import tabStyle from '../styles/evaluation.scss';
class evalTab extends React.Component{
render() {

   return(
     <div className={tabStyle.od_nav}>
     <TabsControl>
        <div name="住宅">
             <City />
        </div>
        <div name="商铺">
            <City />
        </div>
    </TabsControl>
    </div>
   )
}

}
export default evalTab;

解决方案

问题后来自己解决了，不是因为缺少文件，是webpack部署css的时候，没有配置好。

这篇关于react.js - Reactjs 无法使用css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！