Journey into React Part 4: Styling your App with Scss and Webpack

Datetime:2016-08-23 00:28:04          Topic: React  Webpack           Share

I'm back! There was a bit of some down time there while I relocated my business (and myself!) to Minnessota, but after much ado - part 4 is here! If you missed the last few segments you can always catch uphere.

This time we are going to be working on styling our application with some scss by implementing a whole host of new loaders into our webpack.config.js file that will allow us to preprocess that scss for some slick customization. We'll be working with a grid system to streamline our web design, and then we'll put it all together to get our navigation bar looking pretty - all the while setting us up for easy improvements down the road. I'm pretty excited to get started on this one with you, so let's go!

You can find this tutorials repo at this branch on github.

Getting our new dependencies ready

The first thing we want to do is get our new loaders installed so that Webpack knows how to handle the css and scss filetypes that we'll be using in our project. So of course, open up your command line and let's use npm to install the following loaders and save them to the dev dependencies in our package.json file:

$npm install --save-dev extract-text-webpack-plugin css-loader sass-loader style-loader node-sass

This shouldn't take terribly long, and in no time they will be installed and ready to go. We have got enough of these loaders now to pretty much future proof our styling efforts on our app, so brush your hands and let's get down to it!

Update our Webpack configuration to handle css/scss

Next we need to actually equip our webpack.config.js file to test for css/scss file-types. Open up the configuration file and start by importing a new constant at the top of our file:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

Now we need to add a new loader to our module.exports object. Inside the loaders: brackets add on the new scss test, like so:

loaders: [
      {
        test: /\.js|.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]

This is basically like saying, "test if a file ends with the extension .scss , then use the extract text plugin loader with the parameters css!sass . It's actually a pretty simple addition, only two lines, and shouldn't take too long.

Lastly, in our webpack.config.js file we need to add a new parameter to our module.exports object called "plugins". These are additions to webpack that give it increased capabilities, similar to loaders. Beneath our loaders object, you should see an output object - its under this that we want to add the new one that uses the extract text plugin we included above to export our processed scss into a single css file. This will look like this:

output: {
    path: __dirname,
    filename: "bundle.js"
  },
  plugins: [
    new ExtractTextPlugin('src/assets/stylesheets/app.css', { allChunks: true })
  ]

And that's it for our webpack configuration file. Once again, it is one of the more vague and complex additions we'll be adding to our application, but hopefully you've nailed it. If you have questions please leave them in the comments below! Moving on!

Creating our stylesheets

So our webpack can now read and understand scss , so let's give it some to work with. We want to keep a nice clean workspace, so add a new directory in our src folder, and title it assets . Inside assets, add stylesheets , then create the files base.scss and navigation.scss and open them.

It's here that we'll be adding all of our styling for our application, and then our navigation bar as well. Use your creativity to create the base and navigation styles you'd like, or head to the github repo and copy the simple ones I used for this tutorial.

If you're not familiar with how scss works, I'd recommend getting briefly familiar with it before moving forward, here's a great tutorial to get you started !

As this is a React tutorial, not a scss or css one, I'll skip most of the styling part, and we can get back into how to implement these styles into our app!

Including our stylesheets into our application

If you recall, we told webpack to look in our index.js file to find everything it needs to make our application work, then compile it into a single file. So with this in mind, we need to go to our index.js file and let it know to require our newly created base and navigation scss files so that they get included with the bundle.js file that is served to our clients.

Below our imports add the follow:

require('./assets/stylesheets/base.scss');  
require('./assets/stylesheets/navigation.scss');

We just recently told our wepback configuration file to export our processed scss into a file titled app.css that resides in the assets/stylesheets directory, so now we need to bring that into our index.html , much like you would in any normal website, by including it in the <head> tag:

<head>
    <title>Journey into React</title>
    <link rel="stylesheet" type="text/css" href="/src/assets/stylesheets/app.css" />
  </head>

Finally the last thing we want to do is make sure that webpack is reading our scss, and exporting it properly, and that it is actually styling our application. So boot up your application with npm run dev and see if it works!

Adding Lemonade Grid to your application

Effectively implementing a grid into your application (or any website for that matter) is an amazing time saver. The last thing I want to do today is bring in Lemonade grid into our project. It's an incredibly simple and powerful grid system that was developed by "Life's Good" . I use it on my business's website , and now on this project as well. So first we need to install a new dependency:

$npm install --save lemonade-grid

Next you'll need to download the stylesheet, which you can get here . Add this stylesheet to your assets/stylesheets directory, and import it into your index.js file like we did before;

require('./assets/stylesheets/lemonade.scss');

Now that we have this, we can easily incorporate the grid system into our application by defining classnames that use the bit- system that is defined in the Lemonade docs .

In our navigation.js file, add className="frame" to the uppermost div. Inside this container (the navigation container), add a new header element with the title "Journey into React". This should be above the unordered list we created last time. Give both your header tag and your unordered list the className="bit-2" . This is essentially saying that you want the title to take up half of the navigation bar, and you want your links to take up the other half.

Notice that you have to use className in place of the traditional class attribute that you would in html. That's because technically we are writing javascript, and javascript already has a class command. The solution is to use className instead.

This will scale properly on mobile devices, allowing us to bypass implementing a collapsible mobile navigation. Furthermore, starting our grid system out now is going to save us a ton of time down the road because a good structure in our application will make troubleshooting, improving, and scaling it a breeze.

A collapsible navigation menu is still really cool though, and can be done completely in React. I have created a tutorial on that already if you wantto check it out.

How is our application coming?

So to summarize our project so far: we are creating an application that is going to allow us to manage an online database of our contacts with all the basic controls (ie, adding, deleting, viewing, calling, etc). Inpart one we got our windows based work environment set up, and inpart two we got a hello world application started from scratch. From there things started getting really interesting; inpart three we used React Router to navigate between new pages, or locations, in our app, and today we finally got it to look pretty.

We've already got the fundamentals out of our application should look, and we even have some basic controls (navigation), but where do we go from here? Ultimately we want our program to store information in a mongo database, so we are going to need an api to securely communicate with it. Next time we are going to be switching gears and starting a node.js server api that will communicate and share information with the React application we've been working on.

Until next time, happy coding! Please leave your question, feedback, and comments below!





About List