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

debugcn 发表于 Dev

凯文·H

我使用scss-lint来整理我的SCSS文件。要在Webpack中以热模式运行它，我使用scsslint-hot。

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

例如：

./src/style/layout.scss正确LINTED。

但

./src/style/mixins/buttons.scss根本不会掉毛。为什么？

我究竟做错了什么？我在Google上搜索了很多，而且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'
};

谢谢你的帮助！

斯切克

凯文·H

好的，两天后没有任何改变，它突然起作用了:-)

因此，这似乎只是一个缓存问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。