[Vuejs]-Why my webpack.config.js not compiling css files?

by

3👍

✅

Here is a minimal setup to get you started. You can add features step by step and see when it goes wrong! I’ll be glad to help if something goes wrong.

Package versions: webpack(4.29.0) / node-sass(4.11.0) / sass-loader(7.1.0)

webpack.config.js

const HtmlPlugin = require('html-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const MiniCssPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: ['./src/index.js', './src/index.scss'],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        //use: ['style-loader', 'css-loader', 'sass-loader']
        use: [MiniCssPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins:[
    new CleanPlugin('dist'),
    new HtmlPlugin(),
    new MiniCssPlugin(),
    new VueLoaderPlugin()
  ]
}

./src/index.js

var title = document.createElement('h1')
title.innerHTML = 'Hello World'
document.body.appendChild(title)

./src/index.scss

$color: crimson;
h1 {
  background: $color;
  padding: 15px - 10;
}
👤Ali Doustkani

Leave a comment