Use Laravel Mix with OC

Questions
#1

Hello,

Does somebody has experience with using the Laravel Mix with OC?

My friend still has an old iPhone with iOS12 on it :man_shrugging: and I want him to be able to checkout our new project.

When I just use npx mix, then I get following error:

ERROR in ./modules/backend/assets/vendor/bootstrap/bootstrap.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
71 │ @import "bootstrap/scss/variables-dark"; // Required
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  modules/backend/assets/vendor/bootstrap/bootstrap.scss 71:9  root stylesheet
    at processResult (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/sass-loader/dist/index.js:69:5)

ERROR in ./modules/backend/assets/vendor/bootstrap/bootstrap-lite.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
32 │ @import "bootstrap/scss/variables-dark"; // Required
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  modules/backend/assets/vendor/bootstrap/bootstrap-lite.scss 32:9  root stylesheet
    at processResult (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/user/code/project/git/project_oc/octobercms-files/node_modules/sass-loader/dist/index.js:69:5)

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors

However, I easily can comment out the upper part of the webpack.mix.js file, that takes concern of OC files and just compile my own files below. Later I reset the comments.

Is there a better solution?

#2

Yes, you should comment out the October CMS build imports. It is unlikely that you’ll need them.

You can replace them with your own file, for example, in the RainLab.Pages plugin there is a file called rainlab-pages.mix.js with the following contents:

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your theme assets. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

module.exports = (mix) => {
    mix.less('plugins/rainlab/pages/assets/less/pages.less', 'plugins/rainlab/pages/assets/css/');
    mix.less('plugins/rainlab/pages/assets/less/treeview.less', 'plugins/rainlab/pages/assets/css/');
}

It can be included by adding the following line to the webpack.mix.js file:

require('./plugins/rainlab/pages/rainlab-pages.mix')(mix);
#3

I checked, how I can do my own webpack config files, so I don’t need to touch the OC’s one:

I have a file in root with the name my-webpack-config.js

Then I can call these custom webpack configs with Laravel Mix like this:

npx mix --mix-config=my-webpack-config.js

This depends on the version. I think in older Laravel Mix it’s just:

npx mix --config=my-webpack-config.js

EDIT:
You might want to run npx mix continuously. Just npm install -g nodemon, if you haven’t so and then:

nodemon --watch my-webpack-config.js --exec "npx mix --mix-config=my-webpack-config.js"
#4

Just delete the October files and replace them with anything you like.

1 Like