Hey there,
We did a big update at our company and we’re now using Meteor 1.8.1 side by side with React 16.8
We’d like to run Meteor with a separated webpack.config.js and everything compiles except scss files, which are normally all compiled with fourseven:scss. All scss files are ignored, here is my webpack.config.js:
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const meteorExternals = require('webpack-meteor-externals')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const plugins = [
new HtmlWebpackPlugin({
template: './client/main.html'
}),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: './client/main.scss'
})
]
const clientConfig = {
entry: './client/main.jsx',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]]
}
}
]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('autoprefixer')]
}
},
'sass-loader'
]
}
]
},
plugins,
resolve: {
extensions: ['*', '.js', '.jsx']
},
node: {
console: true,
fs: 'empty',
module: 'empty',
net: 'empty',
tls: 'empty'
},
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
externals: [meteorExternals()]
}
const serverConfig = {
entry: ['./server/main.js'],
target: 'node',
devServer: {
hot: true
},
externals: [meteorExternals()]
}
module.exports = [clientConfig, serverConfig]
All my scss files are in ./imports/css/* and everything is imported in ./client/main.scss.
I don’t have any error and the app runs but without css. What am I doing wrong?