0
SCSSファイルを埋め込むためにscss-lintを使用しています。 Webpackのホットモードで実行するには、scsslint-hotを使用します。WebSpackのscsslint-hot preLoaderがサブディレクトリで動作しない
私はこれをWebpackのpreLoadersに追加しました。ファイルがサブディレクトリにネストされていない限り、正常に動作します。例えば
： ./src/style/layout.scss
が適切LINTEDれます。
しかし
./src/style/mixins/buttons.scssは全くLINTED取得していません。どうして？
私は間違っていますか？私は多くのグーグルグーグルとWebpackのドキュメントでは、にはが含まれているので、サブディレクトリも含めるべきだという。
私の.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 = {
\t entry: {
index: path.resolve(dir_js, 'index.jsx')
},
\t output: {
\t \t path: dir_public,
\t \t filename: '[name]_[hash].min.js'
\t },
\t resolve: {
\t \t extensions: ['', '.js', '.jsx']
\t },
\t 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,
}
}
],
\t \t 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'
}
]
\t },
\t devServer: {
\t \t contentBase: "./public",
\t \t // do not print bundle build stats
\t \t noInfo: true,
\t \t // enable HMR
\t \t hot: true,
\t \t // embed the webpack-dev-server runtime into the bundle
\t \t inline: true,
\t \t // serve index.html in place of 404 responses to allow HTML5 history
\t \t historyApiFallback: true,
\t \t port: PORT,
\t \t host: HOST
\t },
\t 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