Samuli Natri

How To Compile Sass And Refresh Browser Automatically (JavaScript, Django)

How to compile Sass to CSS and refresh browser automatically using node-sass and browser-sync.

With the Django development server you can do the following:

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "sync": "browser-sync start --proxy 127.0.0.1:8000 --files \"templates/**/*.html\" \"static/css/*.css\" --no-notify --no-open",
    "sass": "node-sass -w \"static/css/styles.scss\" -o \"static/css\" --output-style compressed"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.7",
    "node-sass": "^4.14.1"
  }
}
  • Use the proxy option to pass in the development server URL.
  • Watch files in the correct folders. This example assumes that your templates are in the project root templates directory and static files in the root static directory.
  • The two stars (templates/**/*.html) indicate that the HTML files can be in any subfolder (at any depth) or in the templates directory root.

Use the static tag to build the URL to the compiled styles.css file:

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Create a file called package.json:

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "sync": "browser-sync start --server --files \"*.html\" \"*.css\" --no-notify --no-open",
    "sass": "node-sass -w \"styles.scss\" -o \".\" --output-style compressed"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.7",
    "node-sass": "^4.14.1"
  }
}
  • --server starts the built-in server.
  • --files specifies what files to watch.
  • --no-notify disables the "browsersync connected" notification.
  • --no-open doesn't open a new tab every time we start the server.
  • -w specifies what file we want to watch.
  • -o specifies the output directory, in this case the current directory.
  • --output-style compressed compresses the CSS.

Create a file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <h1>Lorem ipsum</h1>
</body>
</html>

Create a file called styles.scss:

h1 {
    color: red;
}

Run

npm install -y
npm run sync
npm run sass (in another tab or terminal)

Change the h1 selector color property in styles.scss and watch the styles.css fille appear in the same directory.

Access the web page through the browser-sync server: http://localhost:3000.

Change the h1 color again and the heading color should change automatically without you refreshing the browser.

You might have to refresh the browser once if you did the steps in different order.

Importing Files

You can split your styles into multiple files. Create the files (like _header.scss and _footer.scss) and import the files in styles.scss:

@import "header";
@import "footer";

You want to use an underscore to indicate node-sass that these files are to be imported into another file. The program is smart enough the watch the imported files too.

You have to rerun the node-sass command and save the styles.scss file to start watching the imported files. Do this whenever you add more files for importing.

GitHub link Project source code can be found in GitHub

Comments

- Add code snippets between 3 backticks:

``` def hello_world(): print("Hello world!") ```

- to receive an email notification when somebody replies to your comment.

© 2020 Samuli Natri. All rights reserved.