CSS样式模块通过越来越CSS框架

与CSS模块我的自定义样式正在Bulma默认重写覆盖。CSS样式模块通过越来越CSS框架

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 [email protected]!</h4></a></li> 
     </ul> 
     </div> 
    </div> 
) 
}

CSS（footer.styl）：

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

我试图通过添加类的股利更具体CSS如：

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

它完全停止甚至生效的CSS，它甚至没有被覆盖。我也想知道为什么会发生。

的WebPack 2配置：

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>

来源

2017-04-07 BeniaminoBaggins

也许使用重要的是，强制覆盖

！

来源

2017-04-07 09:28:13

CSS样式模块通过越来越CSS框架

回答

相关问题