Help us improve AdonisJs


#21

I don’t know how to fix it, that’s the problem. extract-text-webpack-plugin is deprecated in webpack 4 in favor of mini-css-extract-plugin and I don’t know enough about webpack to create a working example. I also can’t find a working solution using min-css-extract-plugin anywhere on the web.


#22

In this case, can I suggest you to try Adonis Discord?

It’s a bit more active than forum.


#23

Yeah, I asked a question about it on there nearly 12 hours ago. If anyone answers, I’ll give it another shot. The MVC stuff is simple to me. It’s things like this that are my hangup.


#24

Webpack tends to get rather complex pretty fast depending on your use case. I don’t think Adonis can nor should provide Webpack support. That being said a working example would be nice I guess :grin::

npm install -D babel-loader @babel/core @babel/preset-env webpack webpack-cli style-loader css-loader mini-css-extract-plugin node-sass sass-loader

webpack.config.js:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

function sassRules () {
  return [
    {
      test: /\.(sass|scss)$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

function scriptRules () {
  return [
    {
      test: /\.js$/,
      exclude: [/node_modules/],
      loader: 'babel-loader',
      options: { presets: ['@babel/preset-env'] }
    }
  ]
}

module.exports = {
  entry: [
    './resources/assets/sass/app.scss',
    './resources/assets/scripts/app.js'
  ],
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: sassRules().concat(scriptRules())
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'app.css'
    })
  ]
}