use css modules in app styles

This commit is contained in:
NikolaBorislavovHristov 2019-08-30 11:26:41 +03:00
parent 4307df638a
commit 364daa319e
3 changed files with 9 additions and 6 deletions

View file

@ -2,7 +2,7 @@ const React = require('react');
const { Router } = require('stremio-router');
const { KeyboardNavigation, ServicesProvider } = require('stremio/services');
const routerViewsConfig = require('./routerViewsConfig');
require('./styles');
const styles = require('./styles');
const App = () => {
const onPathNotMatch = React.useCallback(() => {
@ -18,6 +18,7 @@ const App = () => {
<React.StrictMode>
<ServicesProvider services={services}>
<Router
className={styles['router']}
homePath={'/'}
viewsConfig={routerViewsConfig}
onPathNotMatch={onPathNotMatch}

View file

@ -1,7 +1,10 @@
@import (inline, once, css) 'stremio-colors/css/stremio-colors.css';
@import (inline, once, css) 'router/styles.css';
@import (reference) 'common/screen-sizes.less';
:global {
@import (once, less) 'router/styles.css';
}
@font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto-Light.ttf') format('truetype');
@ -85,7 +88,7 @@
background-color: var(--color-backgroundlight);
}
html, body, #app {
html, body, :global(#app) {
position: relative;
z-index: 0;
width: 100vw;
@ -95,7 +98,7 @@ html, body, #app {
font-family: 'Roboto', 'sans-serif';
overflow: auto;
.routes-container {
.router {
width: 100%;
height: 100%;
}

View file

@ -44,8 +44,7 @@ module.exports = {
importLoaders: 2,
modules: {
getLocalIdent: (context, localIdentName, localName, options) => {
if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes')) ||
context.resourcePath.startsWith(path.resolve(__dirname, 'src/App'))) {
if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes'))) {
localIdentName = '[local]';
} else {
localIdentName = '[local]-[hash:base64:5]';