From 7df9ec1bc89ad8ac090cdbe0c12bf1118a09d10c Mon Sep 17 00:00:00 2001 From: Adolfo Panizo Date: Mon, 5 Mar 2018 11:02:45 +0100 Subject: [PATCH] Adding SCSS variables config to webpack prod config --- .gitignore | 1 + config/webpack.config.dev.js | 5 +++-- config/webpack.config.prod.js | 14 +++++++++++--- src/App.js | 2 +- src/{App.css => App.scss} | 2 +- src/components/Header/index.jsx | 2 +- src/components/Header/{index.css => index.scss} | 0 src/components/layout/Page/index.jsx | 2 +- .../layout/Page/{index.css => index.scss} | 0 src/components/layout/PageFrame/index.jsx | 2 +- .../layout/PageFrame/{index.css => index.scss} | 0 src/index.css | 5 ----- 12 files changed, 20 insertions(+), 15 deletions(-) rename src/{App.css => App.scss} (85%) rename src/components/Header/{index.css => index.scss} (100%) rename src/components/layout/Page/{index.css => index.scss} (100%) rename src/components/layout/PageFrame/{index.css => index.scss} (100%) delete mode 100644 src/index.css diff --git a/.gitignore b/.gitignore index 7c56b615..2b1a9754 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules/ build/ +build_webpack/ build/contracts/ truffle-config.js diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 2d4021aa..b62ace96 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -113,6 +113,7 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, + /\.scss$/, /\.json$/, /\.woff$/, /\.woff2$/, @@ -138,8 +139,8 @@ module.exports = { } }, { - test: /\.css$/, - loader: 'style!css?importLoaders=1&modules=true&minimize=true&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap' + test: /\.(scss|css)$/, + loader: 'style!css?importLoaders=1&modules=true&minimize=false&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap' }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 81a01f46..39ec5802 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -1,4 +1,5 @@ var autoprefixer = require('autoprefixer'); +var cssvars = require('postcss-simple-vars'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); @@ -8,7 +9,7 @@ var url = require('url'); var paths = require('./paths'); var getClientEnvironment = require('./env'); - +var cssvariables = require(paths.appSrc + '/theme/variables'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); @@ -116,6 +117,7 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, + /\.scss$/, /\.json$/, /\.woff$/, /\.woff2$/, @@ -146,8 +148,8 @@ module.exports = { // use the "style" loader inside the async code so CSS from them won't be // in the main CSS file. { - test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss') + test: /\.(scss|css)$/, + loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&modules=true&minimize=false!postcss?sourceMap') // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // JSON is not enabled by default in Webpack but both Node and Browserify @@ -200,6 +202,12 @@ module.exports = { 'not ie < 9', // React doesn't support IE8 anyway ] }), + cssvars({ + variables: function () { + return Object.assign({}, cssvariables); + }, + silent: true + }), ]; }, plugins: [ diff --git a/src/App.js b/src/App.js index 24595f09..f0ac5275 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ import contract from 'truffle-contract' import TextField from './components/forms/TextField' import Page from './components/layout/Page' import PageFrame from './components/layout/PageFrame' -import './App.css' +import './App.scss' class App extends Component { constructor(props) { diff --git a/src/App.css b/src/App.scss similarity index 85% rename from src/App.css rename to src/App.scss index 774869dd..79735570 100644 --- a/src/App.css +++ b/src/App.scss @@ -1,6 +1,6 @@ body { font-family: 'Montserrat', sans-serif; - color: $(secondary); + color: $secondary; background-color: #f0f1f3; } diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index c84078b7..011d851a 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './index.css'; +import styles from './index.scss'; const Header = () => (
diff --git a/src/components/Header/index.css b/src/components/Header/index.scss similarity index 100% rename from src/components/Header/index.css rename to src/components/Header/index.scss diff --git a/src/components/layout/Page/index.jsx b/src/components/layout/Page/index.jsx index 03e9e660..17d40b01 100644 --- a/src/components/layout/Page/index.jsx +++ b/src/components/layout/Page/index.jsx @@ -1,6 +1,6 @@ import React from 'react' import Header from '../../Header' -import styles from './index.css'; +import styles from './index.scss'; const Page = ({children}) => (
diff --git a/src/components/layout/Page/index.css b/src/components/layout/Page/index.scss similarity index 100% rename from src/components/layout/Page/index.css rename to src/components/layout/Page/index.scss diff --git a/src/components/layout/PageFrame/index.jsx b/src/components/layout/PageFrame/index.jsx index fa2ff136..a5cc7d38 100644 --- a/src/components/layout/PageFrame/index.jsx +++ b/src/components/layout/PageFrame/index.jsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './index.css'; +import styles from './index.scss'; const PageFrame = ({ children }) => (
diff --git a/src/components/layout/PageFrame/index.css b/src/components/layout/PageFrame/index.scss similarity index 100% rename from src/components/layout/PageFrame/index.css rename to src/components/layout/PageFrame/index.scss diff --git a/src/index.css b/src/index.css deleted file mode 100644 index b4cc7250..00000000 --- a/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -}