scsslint-hot preLoader in Webpack doesn't work in subdirectories

Question

I use scss-lint to lint my SCSS files. To run it in hot mode in Webpack I use scsslint-hot.

I added it to my preLoaders in Webpack and it works fine as long the files are not nested in subdirectories.

For example:

./src/style/layout.scss is linted properly.

BUT

./src/style/mixins/buttons.scss does NOT get linted at all. Why?

What am I doing wrong? I googled a lot and also the Webpack documentation says that include should also include subdirectories.

My .scss-lint.yml only contains rules, I already tried to add scss_files: 'src/style/**/*.scss' to the yml file, but it doesn't fix the problem.

This is the interesting part of my webpack.config.js:

var dir_style = path.resolve(__dirname, 'src', 'style’);

…

preLoaders: [
    {
        ...
    },
    {
        test: /\.scss$/,
        loader: 'scsslint-hot',
        include: dir_style,
        query: {
            config: '.scss-lint.yml',
            failOnError: production,
            failOnWarning: production,
        }
    }
],

And maybe you need to see my full webpack config, there you go:

var webpack = require('webpack'),
    path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    autoprefixer = require('autoprefixer'),
    cssnano = require('cssnano'),
    WebpackCleanupPlugin = require('webpack-cleanup-plugin');
    webpackFailPlugin = require('webpack-fail-plugin');

var production = process.env.NODE_ENV === 'production',
    dir_src = path.resolve(__dirname, 'src'),
    dir_js = path.resolve(dir_src, 'js'),
    dir_style = path.resolve(dir_src, 'style'),
    dir_assets = path.resolve(dir_src, 'assets'),
    dir_public = path.resolve(__dirname, 'public'),
    dir_exclude = /(node_modules|public)/;

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";


var plugins = [
    webpackFailPlugin,
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template: './src/template.html'
    })
];

if (production) {
    plugins.push(
        new webpack.NoErrorsPlugin(), // needs to be only set for production otherwise failOnErrors will be ignored

        // process.env.NODE_ENV is already set to production through "build" task in
        // package.json, but defining it again reduces file size enormous, but I don't know why
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new WebpackCleanupPlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false,
            mangle: true,
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        }),
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
    );
}

module.exports = {
	entry: {
        index: path.resolve(dir_js, 'index.jsx')
    },
	output: {
		path: dir_public,
		filename: '[name]_[hash].min.js'
	},
	resolve: {
		extensions: ['', '.js', '.jsx']
	},
	module: {
        preLoaders: [
            {
                test: /\.jsx?$/,
                loader: 'eslint',
                include: dir_js
            },
            {
                test: /\.scss$/,
                loader: 'scsslint-hot',
                include: dir_style,
                query: {
                    config: '.scss-lint.yml',
                    failOnError: production,
                    failOnWarning: production,
                }
            }
        ],
		loaders: [
            {
                test: /\.jsx?$/,
                exclude: dir_exclude,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react'],
                    plugins: [
                        'transform-runtime',
                        'transform-decorators-legacy',
                        'transform-class-properties',
                        'react-hot-loader/babel'
                    ],
                    cacheDirectory: true
                }
            },
            {
                test: /\.scss$/,
                include: dir_style,
                loaders: ['style', production ? 'css' :'css?sourceMap', 'postcss', 'sass']
            },
            {
                test: /\.(png|jpe?g|gif|mp3|svg)$/,
                include: dir_assets,
                exclude: dir_exclude,
                loader: 'url-loader?limit=10000'
            }
        ]
	},
	devServer: {
		contentBase: "./public",
		// do not print bundle build stats
		noInfo: true,
		// enable HMR
		hot: true,
		// embed the webpack-dev-server runtime into the bundle
		inline: true,
		// serve index.html in place of 404 responses to allow HTML5 history
		historyApiFallback: true,
		port: PORT,
		host: HOST
	},
	plugins: plugins,
    eslint: {
        failOnWarning: production,
        failOnError: production
    },
    postcss: function () {
        return [autoprefixer({ browsers: ['last 2 versions'] }), cssnano];
    },
    debug: !production,
    devtool: production ? false : 'cheap-module-eval-source-map'
};

Thanks for your help!

Schecke

Answer 1

Ok 2 days later without changing anything it suddenly works :-)

So it seemed to be just a caching issue.