ben-rogerson / agency-webpack-mix-config Goto Github PK

This line in webpack.mix.js no longer seems to parse TailwindCSS directives (just remains as e.g.@tailwind components; in the generated CSS. This was working previously, and I I think 0be9d43 was the change that broke it.

mix.options({
    postCss: [
         require('tailwindcss')('./tailwind.config.js'),
     ],
})

@ben-rogerson I have a use-case which looks something like this:

.class{
 &:before{
  content: url("sprite.svg#icon-email");
 }
}

The email.svg is placed under icons directory. What will be a correct way to refer to SVG in SCSS?

I have also noticed that running npm run dev or npm run build will not generate sprite.svg. Not sure what could be the reason.

Great starter kit, but I ran into some trouble integrating with Craft 3 after following the provided instructions.

When switching Mix over from static file building to CMS integration (proxy), the devServer settings should be changed to reflect this as well. e.g. if you don't add a publicPath setting, webpack reports webpack output is served from https://undefined:undefined/.

mix.webpackConfig({
    devServer: {
        clientLogLevel: "none", // Hide console feedback so eslint can take over
        open: false,
        overlay: true,
        port: config.devServerPort,
        public: `localhost:${config.devServerPort}`,
        host: "0.0.0.0", // Allows access from network
        https: config.devProxyDomain.includes("https://"),
        contentBase: config.devWatchPaths.length
            ? config.devWatchPaths
            : undefined,
        watchContentBase: config.devWatchPaths.length > 0,
        publicPath: "/", // <-- for proxy use
        ...

Another thing that needs to be set is 'useAbsoluteUrl' => false, in your config/twigpack.php settings file. If you fail to do so while trying to run the dev server (with HMR), the Twigpack plugin sets the asset path based on Craft's "Site Base" (or FQDN), creating links to assets that don't exist since HMR assets exist in-memory only.

For example, while running the dev server, opening https://localhost:8080 reveals the Craft entry page, but looking at the source, the CSS and JS paths are set to https://my-website.test/dist/main.css instead of https://localhost:8080/dist/main.css which would point to the correct in-memory path.

TLDR;
add publicPath: "/", to Mix's devServer and
'useAbsoluteUrl' => false, in config/twigpack.php

Anyway, hope this helps anyone else integrating with Craft 3.

@ben-rogerson In the section removing-excess-packages it is said to remove laravel-mix-twig-to-html among two other packages. Doing so will return the following error when running npm run dev or npm run start or npm run build:

internal/modules/cjs/loader.js:775
    throw err;
    ^

Error: Cannot find module 'laravel-mix-twig-to-html'
Require stack:
- /Users/<userName>/<projectName>/webpack.mix.js
- /Users/<userName>/<projectName>/node_modules/laravel-mix/setup/webpack.config.js
- /Users/<userName>/<projectName>/node_modules/webpack-cli/bin/utils/convert-argv.js
- /Users/<userName>/<projectName>/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/Users/<userName>/<projectName>/webpack.mix.js:79:1)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/Users/<userName>/<projectName>/node_modules/laravel-mix/setup/webpack.config.js:12:1)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/<userName>/<projectName>/webpack.mix.js',
    '/Users/<userName>/<projectName>/node_modules/laravel-mix/setup/webpack.config.js',
    '/Users/<userName>/<projectName>/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/Users/<userName>/<projectName>/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

Perhaps the docs can be edited to reflect that.

Thanks

The images in source (src/images) are dropped into the dist folder with all sub folders flattened. This causes issues if there are images with the same file name, and is a hassle if you want to use sub folders.

Can be easily changed by replacing line 272 of webpack.mix.js with context: "src".

Edit: typo and formatting

When running the development server, fonts in the source folder aren't available to the site (ie https://localhost:8080/webpack-dev-server doesn't show them).

They get copied to the dist folder fine though.

This plugin seems to fire at the wrong time in certain situations.
It's more solid to use rimraf to remove the built directory before we start

Assets you add within the .twig files in the static build mode don't hash like the .js + .css files.

I'll look into adding this functionality.

Geez, who would have thought that dynamic imports + vendor splitting would be the cause?

Apparently this is a known issue with Laravel Mix and should be fixed when Webpack 5 is released.

Annoying right?