Laravel-Mix | Double slash "//" comments in SCSS

I'm having a problem with Laravel-Mix on my Laravel-Vue SPA: when I try to run npm run prod, PostCSS produces an Unknown Word error. After hours of messing around, I finally figured out this has to do with double slash '//' comments in some of my Vue components and SCSS files. As these comments are not allowed in CSS language, PostCSS throws an error for every single one of them. Now I could of course easily replace all these comments and replace them with proper CSS comments, but I was wondering if there is a workaround or solution to fix this problem and be able to use '//' comments with Laravel-Mix. This is my webpack.mix.js:

const fs = require('fs-extra')
const mix = require('laravel-mix')

// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

mix
  .js('resources/js/app.js', 'public/dist/js')
  .sass('resources/sass/app.scss', 'public/dist/css')
  .disableNotifications()

if (mix.inProduction()) {
  require('laravel-mix-versionhash')
  mix.versionHash()
} else {
  mix.sourceMaps()
}

mix.sourceMaps()

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin()
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/js')
    }
  },
  output: {
    chunkFilename: 'dist/js/[chunkhash].js',
    path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build')
  }
})

mix.then(() => {
  if (!mix.config.hmr) {
    process.nextTick(() => publishAssets())
  }
})

function publishAssets () {
  const publicDir = path.resolve(__dirname, './public')

  if (mix.inProduction()) {
    fs.removeSync(path.join(publicDir, 'dist'))
  }

  fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
  fs.removeSync(path.join(publicDir, 'build'))
}

bobbybouwmann

6 years ago

Level 88

I would replace them with the correct syntax here. It doesn't make sense to have comments in a different format than the language supports.

Also, commenting out a lot of code is also not a best practice. Most projects have git, so if you need something from the past you can find it. You don't need to comment your code for later usage.

I do understand, that you might run into this whenever you're trying stuff out in your code. I would probably use the correct comment syntax instead ;)

1 like

rick-tibbe

6 years ago

Level 4

Thanks for your reply. The problem is that a // comment is accepted in SCSS files, so there's actually nothing wrong with my code, but somehow Webpack won't compile it. And the thing is that someone else made all the .vue file, I just have to implement it with Laravel-Vue and somehow it's going wrong when Laravel-Mix comes in, because all the files are working when I run npm run prod on his work.

willvincent

6 years ago

Level 54

Unless something has changed, I seem to recall there being known issues around style extraction from vue files with the latest version(s) of laravel-mix. Might be related

rick-tibbe

6 years ago

Level 4

I did not change anything, so I suspect the problem is coming form these issues. I've just found a workaround where I put all the SCSS imports in the App.vue file and remove mix.scss() from the webpack.mix.js file. This puts all of my CSS in the js file, which is most definitely not the wanted solution, but at least everything works for now. I'll probably just have to wait till these underlying problems get fixed.

willvincent

6 years ago

Level 54

You could try reverting to an earlier version of laravel mix

rick-tibbe

6 years ago

Level 4

I'll try out some earlier versions later this weekend, thanks for the suggestion!

1 like

rick-tibbe

6 years ago

Best Answer

Level 4

So I finally figured out a solution to the problem:

I'm using https://github.com/cretueusebiu/laravel-vue-spa as a template, and after running npm install I always ran npm audit fix as well. It turned out this caused some issues with the dependencies of the template (the same as when you'd run npm update). I deleted the package-lock.json file and the node_modules folder and changed "laravel-mix-versionhash": "^1.0.7", to "laravel-mix-versionhash": "1.0.7", (I removed the ^ before 1.0.7 so it'd always pick 1.0.7).

Turned out this had nothing to do with the double slash comments and was all caused by this dependency. Anyways, it's fixed, all npm commands are running perfectly fine now :)

Please or to participate in this conversation.