Welcome to JiKe DevOps Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
153 views
in Technique[技术] by (71.8m points)

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;


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to JiKe DevOps Community for programmer and developer-Open, Learning and Share
...