Webpack не обрабатывает scss с помощью postcss-sorting или prettier-loader
Я новичок в вебпаке, так что если какие-либо предложения, основанные на приведенном ниже коде, все приветствуются. Пожалуйста, прости меня, если я сделал ошибки новичка.
Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь заставить postcss-сортировку и prettier-загрузчик работать с нашими файлами scss. На данный момент он обрабатывает только основной файл (style.scss), а не все файлы, которые я импортирую. В принципе, это не рекурсивно.
Я добавил файлы scss как отдельные требуемые файлы в мой файл app.js, но он обрабатывает их как отдельные файлы, которые отбрасывают ошибки переменных, не определенных в этом файле, но в файлах, импортируемых в основные файлы scss.
Как сделать так, чтобы веб-пакеты обрабатывали scss-файлы, которые импортируются в основной scss-файл?
Конфигурация веб-пакета:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const PrettierPlugin = require( 'prettier-webpack-plugin' );
const opts = {
rootDir: path.join( process.cwd(), 'public_html/app/themes/testtest' ),
};
module.exports = {
context: path.join(opts.rootDir, '/src' ),
entry: {
app: './app.js',
admin: './admin.js',
},
stats: {
all: false, // all errors off
timings: true, // ... except timing
errors: true, // ... except errors
errorDetails: false, // ... except error details
},
//devtool: 'source-map', // sourceMaps on, but also for JS. Need just CSS
module: {
rules: [{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader', // css parser
options: {
sourceMap: true,
importLoaders: 2
}
}, {
loader: 'postcss-loader', // scss / sass compiler / minify / autoprefix / next gen css
options: {
sourceMap: true
includePaths: [
path.resolve( opts.rootDir, '/src/scss'),
],
}
}, {
loader: 'sass-loader', // scss / sass compiler
options: {
sourceMap: true,
sourceMapContents: true,
includePaths: [
path.resolve( opts.rootDir, '/src/scss'),
],
}
},/* {
loader: 'prettier-loader',
enforce: 'pre',
options: {
includePaths: [
path.resolve( opts.rootDir, '/src/scss'),
],
}
}*/],
// use style-loader in development
fallback: "style-loader"
}),
}, {
test: /\.(gif|png|jpe?g|svg|ico|)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
}
}
}]
}, {
test: /\.(ttf|eot|woff|woff2|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
}
}]
}]
},
output: {
filename: '[name].js',
path: path.join( opts.rootDir, '/dist'),
},
watch: true,
plugins: [
//extractSass,
new ExtractTextPlugin( '[name].css' ),
new PrettierPlugin()
]
};
main app.js
/** webpack build rules */
require( './style.scss' );
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./svg/', true, /\.svg$/));
//requireAll(require.context('./scss/', true, /\.scss/));
requireAll(require.context('./ico/', true, /\.png|.ico$/));
//requireAll(require.context('./png/', true, /\.png/));
//requireAll(require.context('./jpeg/', true, /\.jpe?g/));
//requireAll(require.context('./gif/', true, /\.gif/));
requireAll(require.context('./fonts/', true, /$/));
Конфиг PostCSS:
module.exports = {
parser: "postcss-scss",
plugins: [
require("postcss-import")({
// beter scss import
plugins: [
require("stylelint")({
/* your options */
}) // linting / errors / warning
]
}),
//require( 'postcss-cssnext' ) ({ /* your options */ }), // next gen CSS (very slow)
require("autoprefixer")({
// autoprefixer
browsers: ["last 5 versions"]
}),
require("postcss-sorting")({
"order": [
//removed all properties to not paste all specs in this post
]
}),
require("cssnano")({
/* your options */
}) // minify
]
};