Webpack 中的 scsslint-hot preLoader 在子目录中不起作用

Question

我使用 scss-lint 来检查我的 SCSS 文件。为了运行它在 Webpack 中处于热模式，我使用 scsslint-hot。

我在 Webpack 中将它添加到我的 preLoaders 中，只要文件不嵌套在子目录中，它就可以正常工作。

例如：

./src/style/layout.scss 已正确检查。

但是

./src/style/mixins/buttons.scss 根本不会被检查。为什么？

我做错了什么？我在谷歌上搜索了很多，Webpack 文档也说 include 还应该包含子目录。

我的 .scss-lint.yml 只包含规则，我已经尝试将 scss_files: 'src/style/**/*.scss' 添加到 yml 文件中，但它没有修复问题。

这是我 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,
        }
    }
],

也许你需要看看我完整的 webpack 配置，你去吧：

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

感谢您的帮助！

Schecke

Answer 1

好的 2 天后，无需更改任何东西，它突然可以工作了:-)

所以这似乎只是一个缓存问题。

Webpack 中的 scsslint-hot preLoader 在子目录中不起作用

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

preloader

subdirectory

webpack

scss-lint