August 2017 Gitlab migration is now completed. Emails should work now. More information: http://telegra.ph/CiTIUS-Gitlab-Migration-Status-08-23

Añadidos modulos CSS para evitar posibles colisiones de nombres en clases.

Eliminado el soporte para CSS global, ahora todos los estilos se cargan como módulos.
parent c56c73b8
......@@ -5,7 +5,7 @@
"description": "Base template for project built using React, Redux and Webpack",
"main": "",
"scripts": {
"serve": "webpack-dev-server --hot --inline --watch --port 3001 --progress --colors --compress",
"serve": "webpack-dev-server --hot --inline --watch --port 3000 --progress --colors --compress",
"build:dist": "NODE_ENV=production webpack --optimize-minimize --optimize-dedupe --progress --colors",
"build:dev": "webpack --debug --devtool source-map --output-pathinfo --progress --colors",
"build:translations": "babel-node --presets es2015 tools/extract-locales.js",
......@@ -26,13 +26,13 @@
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"import-glob-loader": "^1.1.0",
"json-loader": "^0.5.4",
"material-ui": "^0.15.0-alpha.2",
"node-sass": "^3.4.2",
"postcss-cssnext": "^2.5.1",
"postcss-loader": "^0.8.2",
"react": "^0.14.7",
"react-css-modules": "^3.7.6",
"react-dimensions": "^1.0.2",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
......
......@@ -4,6 +4,9 @@ import { connect } from 'react-redux'
import Dimensions from 'react-dimensions'
import { Link } from 'react-router'
import { FormattedMessage } from 'react-intl'
import CSSModules from 'react-css-modules'
import styles from '../styles/styles.scss'
import autobind from 'autobind-decorator'
......@@ -28,6 +31,7 @@ import * as UIActions from '../store/actions/UIActions'
import { Breakpoints } from '../styles/Breakpoints'
@Dimensions()
@CSSModules(styles)
class App extends Component {
constructor() {
super();
......@@ -46,9 +50,9 @@ class App extends Component {
const { title, isMenuOpened, children, containerWidth } = this.props;
return (
<div className='app-container'>
<div className='div1' styleName='app-container'>
<AppBar
className = 'appbar-container'
styleName = 'appbar-container'
title = {title}
iconElementLeft = {
<IconButton onClick={ this.handleNavigationButtonClick }>
......@@ -57,7 +61,7 @@ class App extends Component {
}
showMenuIconButton = { containerWidth < Breakpoints.large } />
<LeftNav
className='leftbar-container'
styleName='leftbar-container'
open={(containerWidth < Breakpoints.large && isMenuOpened) || (containerWidth >= Breakpoints.medium)}
docked={ containerWidth >= Breakpoints.large }
>
......@@ -82,7 +86,7 @@ class App extends Component {
</MenuItem>
</Link>
</LeftNav>
<div className='main-container'>
<div styleName='main-container'>
{ children }
</div>
</div>
......
@import 'palette';
@import 'breakpoints';
@import '../../components/**/*.scss';
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,300italic,100italic,100,400italic,500italic,700,900,700italic,900italic);
body{
:global( html ), :global( body ), :global( #app ){
height: 100%;
}
:global( body ){
margin: 0;
}
*{
:global( * ){
user-select: none;
}
noscript{
height: 100vh;
:global( noscript ){
height: 100%;
display: flex;
overflow: hidden;
flex-direction: column;
......@@ -22,6 +25,8 @@ noscript{
}
.app-container{
height: 100%;
.leftbar-container{
@media screen and (min-width: $large-breakpoint) {
background-color: $primary2Color!important;
......
import React, {Component} from 'react'
import CSSModules from 'react-css-modules'
import styles from './styles.scss'
@CSSModules(styles)
class Home extends Component {
constructor() {
super();
......@@ -7,7 +11,7 @@ class Home extends Component {
render() {
return(
<div className='home'>
<div styleName='home'>
<img src='http://www.phdcomics.com/comics/archive/phd012716s.gif' />
<hgroup>
<h1>Welcome!</h1>
......
import React, {Component} from 'react'
import { FormattedMessage } from 'react-intl'
import CSSModules from 'react-css-modules'
import styles from './styles.scss'
import icon from './img/404.svg'
@CSSModules(styles)
class NotFound extends Component {
constructor() {
super();
......@@ -10,7 +14,7 @@ class NotFound extends Component {
render() {
return (
<div className='error'>
<div styleName='error'>
<hgroup>
<h1>
<FormattedMessage
......
......@@ -23,14 +23,18 @@ var loaders = [
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader!sass-loader!import-glob-loader')
isProductionBuild
? 'style'
: 'style-loader?sourceMap',
isProductionBuild
? 'css?modules&importLoaders=1&localIdentName=[hash:base64:8]!postcss!sass'
: 'css?modules&importLoaders=1&localIdentName=[path]__[local]___[hash:base64:5]!postcss!sass')
}, {
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192'
loader: 'url?limit=8192'
}, {
test: /\.json$/,
loader: 'json-loader'
loader: 'json'
}
];
......@@ -58,7 +62,7 @@ module.exports = {
entry:{
javascript: __dirname + '/src/common/index.js',
html: __dirname + '/src/common/index.html',
css: __dirname + '/src/common/styles/styles.scss'
//css: __dirname + '/src/common/styles/styles.scss'
},
output: {
filename: 'app.js',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment