2

私は、js と scss を処理して lint するために使用しているこの webpack 構成を持っています。

    var path = require('path');
    var webpack = require('webpack');
    var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var StyleLintPlugin = require('stylelint-webpack-plugin');
    var PostCssLoader = require('postcss-loader');

    var sassLoaders = [
    'css-loader',
    'postcss-loader',
    'sass-loader'
    ]

    module.exports = {
    devtool: 'cheap-source-map',
    entry: {
        global: "./src"
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    module: {
        rules: [
        {
            test: /\.js/,
            loaders: ['babel-loader', 'eslint-loader'],
            exclude: /node_modules/
        },
        {
            test: /\.scss/,
            loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: sassLoaders.join('!')})
        }
        ]
    },
    plugins: [
        new ExtractTextPlugin("[name].css"),
        new CommonsChunkPlugin({
        filename: "common.js",
        name: "global"
        }),
        new StyleLintPlugin({
        context: "src",
        configFile: '.stylelintrc',
        files: '**/*.scss',
        failOnError: false,
        quiet: false,
        syntax: 'scss'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: []
            }
        })
    ],
    resolve: {
        modules: [ path.join(__dirname, './src') ],
        extensions: ['.js', '.scss', '.css']
    }
    }

私の src フォルダーには、index.js と styles.scss があります。

正しく実行webpackすると、index.js ファイルと styles.scss ファイルがリントされます。ただし、webpack --watchjs ファイルを変更すると、再リントのみが実行されます。私の styles.scss ファイルの更新を監視していないようです。

webpack ウォッチが scss ファイルでも適切に動作するようにするために必要なことはありますか?

4

0 に答える 0