Question

我的自定义样式与css模块被Bulma默认值覆盖。

html（jsx）（footer.js）：

import { html } from 'snabbdom-jsx'
import styles from './footer.styl'

export default function Footer() {
  const sinks = {
    DOM: view()
  }
  return sinks
}

function view() {
  return (
    <div className="container">
      <div className="tabs is-centered">
        <ul>
          <li><a><h4 className={`subtitle ${styles.text}`}>If you have any issues or suggestions, contact us at support@volcalc.net!</h4></a></li>
        </ul>
      </div>
    </div>
  )
}

css（footer.styl）：

div ul li a h4.text {
  color: #FFF;
}

我尝试通过将类添加到css中的div来更具体：

 div.container ul li a h4.text {
  color: #FFF;
}

它完全阻止了css甚至生效，它甚至都没有被覆盖。我也想知道为什么会这样。

webpack 2 config：

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      },

      {
        test: /\.styl$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          'stylus-loader'
        ],
      }

    ]
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.join(__dirname, 'src'),
      'node_modules'
    ]
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
  ],
}

的index.html：

<html>

<head>
  <title>xxx</title>
  <meta name="description" content="xxx" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="node_modules/bulma/css/bulma.css" />
  <link rel="stylesheet" type="text/css" href="./index.styl" />
  <script type="text/javascript">
    (function () {
      var css = document.createElement('link');
      css.href = '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
      css.rel = 'stylesheet';
      css.type = 'text/css';
      document.getElementsByTagName('head')[0].appendChild(css);
    })();
  </script>
</head>

<body>
  <div id='root'></div>
  <script src="bundle.js"></script>
  <script src="https://use.fontawesome.com/be570749ac.js"></script>
</body>
<style>
  html {
    overflow-y: auto;
  }
</style>

</html>

Answer 1

也许使用！important，强制覆盖

css模块样式被css框架覆盖

1 个答案: