Home

Hi there I am trying to modify the webpack config for our custom Sass/PostCSS setup. To do this I need to modify the vue-loader config to prevent the default Sass loader from being used.

I am following the the instructions both here and here

I have the build processes completing without any errors but when I load the application in the browser I get the following error.

TypeError: Cannot read property 'toLowerCase' of undefined
    at /Users/foobar/Projects/Vue/MyApp/node_modules/vue/dist/vue.runtime.common.js:92:38

I imagine this means there is something I need to define that I am not but I cannot find anything in either docs that I am missing.

Here is my nuxt.config.js

module.exports = {
  /*
  ** Build configuration
  */
  build: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              parser: 'postcss-scss',
              plugins: {
                'postcss-import': {},
                'postcss-simple-vars': {},
                'postcss-strip-inline-comments': {},
                'postcss-remify': {},
                'precss': {},
                'postcss-cssnext': {},
                'cssnano': false
              }
            }
          },
        ]
      }
    ]
  },
  /*
  ** Headers
  ** Common headers are already provided by @nuxtjs/pwa preset
  */
  head: {},
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Customize app manifest
  */
  manifest: {
    theme_color: '#3B8070'
  },
  /*
  ** Modules
  */
  modules: [
    '@nuxtjs/pwa'
  ]
}