html - css modules styles getting overridden by css framework -
my custom styles css modules being overridden bulma defaults.
html (jsx) (footer.js):
import { html } 'snabbdom-jsx' import styles './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 have issues or suggestions, contact @ support@volcalc.net!</h4></a></li> </ul> </div> </div> ) } css (footer.styl):
div ul li h4.text { color: #fff; } i try more specific adding class div in css like:
div.container ul li h4.text { color: #fff; } which stops css taking effect, not there overridden. know why happens.
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>
maybe use !important, force override
Comments
Post a Comment