0

私は scss-lint を使って SCSS ファイルをリントしています。Webpack でホット モードで実行するには、scsslint-hot を使用します。

Webpackの preLoadersに追加しましたが、ファイルがサブディレクトリにネストされていない限り、正常に動作します。

例えば：

./src/style/layout.scssは適切に lint されています。

しかし

./src/style/mixins/buttons.scssはまったくリントされません。なんで？

私は何を間違っていますか？私はよくグーグルで検索しましたが、Webpackのドキュメントにも、インクルードにはサブディレクトリも含める必要があると書かれています。

私の .scss-lint.ymlにはルールしか含まれていません。既に yml ファイルに追加しようとしましscss_files: 'src/style/**/*.scss'たが、問題は解決しません。

これは、私の 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'
};

ご協力いただきありがとうございます！

シェケ

4

1 に答える 1

0

何も変更せずに2日後、突然動作します:-)

したがって、それは単なるキャッシングの問題のようでした。

于 2016-12-19T02:21:37.677 に答える