Sass without Webpack

Hello and welcome to the forum…

It’s mostly due to the ever moving js world. There is a post by @peerreynders here that explains how to procede with babel config. Don’t miss the ncu -u part, which is really cool tip to update your npm dependencies.

Don’t forget to add node-sass and sass-loader.

A good start would be to show part of your package.json and webpack.config.js.

These are rules I am using for sass, fonts, images… (in webpack.config.js)

      // Load stylesheets
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ]
      },
      // Load images
      {
        test: /\.(png|svg|jpe?g|gif)(\?.*$|$)/,
        loader: 'url-loader?limit=10000',
      },
      // Load fonts
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?(\?.*$|$)/,
        use: 'url-loader?&limit=10000&name=/fonts/[name].[ext]',
      },
      {
        test: /\.(eot|ttf|otf)?(\?.*$|$)/,
        loader: 'file-loader?&limit=10000&name=/fonts/[name].[ext]',
      },
4 Likes