Below we will look at how to fix the Node Sass unsupported runtime error. These errors creep in over time, whether you’re using gulp, webpack, grunt, or anything else. css file types from our into errors while developing a project is a significant hassle, and nothing is more annoying than fixing errors in your build pipeline. Refactoringįor this practice project, let's remove our src/css directory (and the contained stylesheet), so our updated project structure looks like this: modern-environment-practice It's up to you to determine which of these directories and corresponding rules to include in your own projects.
scss files, and omit the css directory and CSS-Loader Webpack rule.Ĭonversely, projects using only CSS and no Sass may omit the sass directory and Sass-Loader Webpack configuration. So, keep in mind Webpack-bundled projects using only Sass or Sass and CSS together can include all styles in.
We wanted you to see how to manage CSS and Sass with Webpack individually, as not all projects in the field use Sass. After all, standard CSS syntax is valid Sass syntax, and CSS styles can therefore be added to a. However, as you know after practicing Sass earlier in this course, there's no reason to include both css and sass directories in a project. We should see our homepage features the text styles from our Sass! Considerations Now let's try it out! We'll delete our dist directory, run $ npm run build to construct a new bundle that contains our Sass, and launch dist/index.html in the browser. We'll also import our Sass stylesheet into the entry point, so Webpack has access to it: We must compile it back into standard CSS before the browser loads it.) (As you'll recall, browsers don't understand Sass by default. The third, sass-loader, helps transform this Sass into CSS the browser can understand.The second, css-loader, puts this big string into our main.js bundle file.The first loader, style-loader, turns all our Sass into one big string. The first two loaders are the same we use to bundle CSS.The use value corresponds to an array of three loader names:.The portion stating test: /\.scss$/ tells Wepback this rule should be applied to files with a.(Notice the comma we've also added after the existing rule for CSS.) const path = require('path') Ĭonst HtmlWebpackPlugin = require('html-webpack-plugin') scss files, directly below the existing rule for.
We'll update to include a rule for handling. Next we'll configure Webpack to use our new loader.
We can install it with another quick command: $ npm install -save-dev Just know we'll use the Node-Sass library to meet this need. But Sass-Loader gives the developer a choice of two packages to fulfill one of its internal dependency requirements.
Other dependencies we've downloaded have installed their internal dependencies automatically, without requiring we do anything. This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.Įssentially, this loader has internal dependencies. The sass-loader requires you to install either Node Sass or Dart Sass on your own. We'll use the following command to install it via npm: $ npm install -save-devīut this specific loader requires an extra step of setup, as stated at the top of its GitHub Documentation: Similar to how we configured Webpack to work with CSS, we'll install a special loader to help Webpack bundle Sass. Now we need to tell Webpack how to handle this new type of syntax. Src/sass/styles.scss $font-stack: Helvetica, sans-serif