小编sah*_*nki的帖子

我正在为CSS 使用css-loader，style-loader但所有媒体查询均无法正常工作。我使用"webpack": "^3.4.1"，"css-loader": "^0.28.4"和"style-loader": "^0.18.2"。

这是我的Webpack配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

rules: [{
  test: /\.css$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[name]-[local]-[hash:base64:6]',
      camelCase: true
    }
  }]
}]
...
plugins: [
  new ExtractTextPlugin({
    filename: 'style.[chunkhash:6].css',
    allChunks: true
  })
]

我的css文件是这样的：

.container{
  position: relative;
  margin: 30px 15px;
  padding: 50px 15px;
  background: #fff;
}
@media (max-width: 768px) {
  .container{
    background: #fbfbfb;
  }
}

我正在这样的React代码中导入此CSS文件：

import …

我想创建一个边界半径为50%且具有蓝色背景的div,使得曲线的右侧部分应该填充另一种颜色,例如淡蓝色.我们如何使用css伪元素来做到这一点

#circle{
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 50%;
}

我正在使用库创建水平条形图recharts。我想将 y 轴标签对齐在左侧。

<BarChart width={400} height={300} data={data} layout="vertical" margin={{right: 40}}>
   <XAxis hide axisLine={false} type="number"/>
   <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} />
   <Bar dataKey="pv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#8884d8" background={{fill: "#eee", radius: [20,20,20,20]}} tick={false} />
   <Bar dataKey="uv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#eee" >
     <LabelList dataKey="amt" position="right" />
   </Bar>
</BarChart>

杰斯小提琴