我是webpack的新手，所以如果有任何基于以下代码的建议，欢迎所有人。如果我犯了菜鸟错误，请原谅我。
我面临的问题是我试图让postcss-sorting和prettier-loader来处理我们的scss文件。目前它只处理主文件（style.scss）文件而不是我导入的所有文件。基本上，它不是递归的。
我在我的app.js中将scss文件添加为单独的require文件，但是它将它作为单独的文件处理，这会抛出该文件中未定义的变量的错误，但会丢失在主scss文件中导入的文件中。
如何制作我在主scss文件中导入的webpack进程scss文件？
webpack config：
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()
]
};
主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
]
};