最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中css不起效果

CSS crifan 1389浏览 0评论

折腾:

【已解决】ReactJS的ReactJS-AdminLTE中添加ECharts

期间,需要添加样式。

react-hot-boilerplate/react-hot-boilerplate/src/app.js

import  ‘./app.css’;
            <div className="prospect_object">有望监控:本月新增有望客户目标完成进度</div>

react-hot-boilerplate/react-hot-boilerplate/src/app.css

.prospect_object {
    position: fixed;
    color: red;
    border-bottom: 1px solid #ccc;
    width: 400px;
    /* width: 100%; */
    height: 20px;
    text-align: center;
}

另外,之前已经加了css-loader了:

/react-hot-boilerplate/react-hot-boilerplate/webpack.config.js

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [‘react-hot-loader’, ‘babel-loader’],
        include: path.join(__dirname, ‘src’)
      },
      {
        test: /\.css$/,
        loaders: [‘css-loader’],
        include: path.join(__dirname, ‘src’)
      }
    ]
  }

结果,调试发现,html中element的样式根本没有进来:

react js css not work

Component CSS is Not loaded · Issue #602 · JedWatson/react-select

Setting up CSS Modules with React and Webpack

去添加:

import style from ‘./app.css’;
            <div className={style.prospect_object}>有望监控:本月新增有望客户目标完成进度</div>

结果问题依旧。

Setting up CSS Modules with React and Webpack

react js add module css

javascript – How to import a css file in a react component? – Stack Overflow

CSS Modules and React | CSS-Tricks

gajus/react-css-modules: Seamless mapping of class names to CSS modules inside of React components.

Modular CSS with React – Philippe Masset – Medium

How to Use CSS Modules with Create React App – Nulogy – Medium

加载 CSS | React Webpack 小书

➜  react-hot-boilerplate git:(master) ✗ npm install css-loader style-loader
npm WARN react-dom@15.6.1 requires a peer of react@^15.6.1 but none was installed.
added 7 packages and updated 1 package in 8.319
      {
        test: /\.css$/,
        loaders: [‘style-loader’, ‘css-loader’],
        include: path.join(__dirname, ‘src’)
      }

结果:

问题依旧。

又去测试了下,最后是把:

      {
        test: /\.css$/,
        loaders: [‘css-loader’],
        include: path.join(__dirname, ‘src’)
      }

加上style-loader(就是上面的配置啊):

      {
        test: /\.css$/,
        loaders: [‘style-loader’, ‘css-loader’],
        include: path.join(__dirname, ‘src’)
      }

然后之前的代码:

import ‘./app.css’;
            <div className="prospect_object">有望监控:本月新增有望客户目标完成进度</div>

就是生效的:

【总结】

先去安装css和style的加载器:

npm install css-loader style-loader

然后再去加上webpack的配置:

webpack.config.js

      {
        test: /\.css$/,
        loaders: [‘style-loader’, ‘css-loader’],
        include: path.join(__dirname, ‘src’)
      }

 然后代码中引用css后,即可:

app.css

.prospect_object {
    position: fixed;
    color: red;
    border-bottom: 1px solid #ccc;
    width: 400px;
    /* width: 100%; */
    height: 20px;
    text-align: center;
}

App.js

import ‘./app.css’;
<div className="prospect_object">有望监控:本月新增有望客户目标完成进度</div>

就可以了。

【后记】

接着发现:

但是css Module不起效果:

即:

import style from ‘./app.css’;
            <div className={style.prospect_object}>有望监控:本月新增有望客户目标完成进度</div>

是不可以的。暂时不继续弄了。

转载请注明:在路上 » 【已解决】ReactJS中css不起效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.083 seconds, using 18.98MB memory