Why my webpack.config.js not compiling css files?

Question

I am making spa application in phalcon. I would like to use scss, vue for my assets and compile them using webpack 4 where I am newbie. I found minicssextract plugin which compiles css files but I don't understand why it cannot find appropriate type. Here is my configuration:

let path = require('path');
let webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
   entry: [
       './resources/js/app.js',
       './resources/scss/app.sсss'
   ],
   output: {
       path          : path.resolve(__dirname, './public/oauth/js'),
       publicPath    : '/oauth/js/',
       filename      : 'app.js',
   },
   devtool: "source-map",
   resolve: {
       alias: {
            'vue$': 'vue/dist/vue.esm.js'
       },
       extensions: ['*', '.js', '.vue', '.json']
   },
   module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => (
                     /node_modules/.test(file) &&
                     !/\.vue\.js/.test(file)
                )
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
        new VueLoaderPlugin()
    ]
};

But it shows the following errors:

ERROR in ./resources/scss/app.sсss 1:2 Module parse failed: Unexpected token (1:2) You may need an appropriate loader to handle this file type. h1{ | color: red; | } @ multi ./resources/js/app.js ./resources/scss/app.sсss main[1]

did you install node-sass? if not, install it like this: `npm i -D node-sass` — Ali Doustkani, Jan 31 '19 at 08:17
I ran it on my machine and it worked. That would be great if I could see your sass file. — Ali Doustkani, Jan 31 '19 at 08:35
Test it with a minimal configuration first. I will send you as an answer, then you can complete it progressively. — Ali Doustkani, Jan 31 '19 at 08:50

Ali Doustkani · Accepted Answer · 2019-01-31T09:38:41.550

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;
}

edited Jan 31 '19 at 09:38

answered Jan 31 '19 at 09:00

Ali Doustkani

728
7
14

I had no css file separately – Sakezzz Jan 31 '19 at 09:07
You mean you had empty .scss files? – Ali Doustkani Jan 31 '19 at 09:08
no, in dist folder I do not see any stylesheet files – Sakezzz Jan 31 '19 at 09:09
That's what `style-loader` do. It just adds the ` – Ali Doustkani Jan 31 '19 at 09:13
yes, that's worked, but it does not read my vue template files, anyway thanks – Sakezzz Jan 31 '19 at 09:32
Yeah, I know, because I removed it's rule. Just add the rule and it's plugin and test it again. I did it in my version. – Ali Doustkani Jan 31 '19 at 09:36

Why my webpack.config.js not compiling css files?

1 Answers1