title: Rails/Webpacker not loading Vue styles in production
body: <p>I have a rails app that I have upgraded to use webpacker 4.x and everything works fine on development but in production Vue single file components styles are not rendered, js works fine and even some styles from components (<strong>vue-slider-component</strong> for example) display correctly. I was using webpacker 3 before and things were working fine but the app started to become really slow on development and decided to migrate to a new webpacker.</p>
  
  <p>An important note is that I'm using <strong>sass (scss)</strong> styles in my vue components.</p>
  
  <p>Here is my config:</p>
  
  <pre class="lang-js prettyprint-override"><code>// config/webpack/environment.js
  const { environment } = require('@rails/webpacker');
  const path = require('path');
  const { VueLoaderPlugin } = require('vue-loader');
  const vue = require('./loaders/vue');
  const sass = require('./loaders/sass');
  
  environment.config.resolve.symlinks = false;
  
  environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
  environment.loaders.append('vue', vue);
  environment.loaders.append('sass', sass);
  const nodeModulesLoader = environment.loaders.get('nodeModules');
  
  nodeModulesLoader.exclude = [nodeModulesLoader.exclude, /mapbox-gl/];
  
  environment.config.resolve.alias = {
    vue$: 'vue/dist/vue.esm.js',
    '@': path.join(__dirname, '..', '..', 'app', 'javascript'),
    '@stylesheets': path.join(__dirname, '..', '..', 'app', 'assets', 'stylesheets'),
    '@javascripts': path.join(__dirname, '..', '..', 'app', 'assets', 'javascripts'),
    '@node_modules': path.join(__dirname, '..', '..', 'node_modules')
  };
  module.exports = environment;
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// config/webpack/production.js
  process.env.NODE_ENV = process.env.NODE_ENV || 'production'
  
  const environment = require('./environment')
  
  module.exports = environment.toWebpackConfig()
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// config/webpack/loaders/vue.js
  module.exports = {
    test: /\.vue(\.erb)?$/,
    use: [
      {
        loader: 'vue-loader',
      },
    ],
  };
  </code></pre>
  
  <p>I wonder if <code>loaders/sass.js</code> is the reason</p>
  
  <pre class="lang-js prettyprint-override"><code>// config/webpack/loaders/sass.js
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  const { extract_css: extractCSS } = require('@rails/webpacker').config;
  
  module.exports = {
    test: /\.(scss|sass|css)$/i,
    use: [extractCSS ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader', 'sass-loader'],
  };
  
  </code></pre>
  
  <pre><code># config/webpacker.yml
  
  default: &amp;default
    source_path: app/javascript
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker
    check_yarn_integrity: false
    webpack_compile_output: false
  
     # Additional paths webpack should lookup modules
    # ['app/assets', 'engine/foo/app/assets']
    resolved_paths: []
  
    # Reload manifest.json on all requests so we reload latest compiled packs
    cache_manifest: false
  
    # Extract and emit a css file
    extract_css: false
  
    static_assets_extensions:
      - .jpg
      - .jpeg
      - .png
      - .gif
      - .tiff
      - .ico
      - .svg
      - .eot
      - .otf
      - .ttf
      - .woff
      - .woff2
  
    extensions:
      - .js
      - .vue
      - .sass
      - .scss
      - .css
      - .module.sass
      - .module.scss
      - .module.css
      - .png
      - .svg
      - .gif
      - .jpeg
      - .jpg
  
  development:
    &lt;&lt;: *default
  
    check_yarn_integrity: false
  
    # Reference: https://webpack.js.org/configuration/dev-server/
    dev_server:
      https: false
      host: localhost
      port: 3035
      public: localhost:3035
      hmr: true
      # Inline should be set to true if using HMR
      inline: true
      overlay: true
      compress: true
      disable_host_check: true
      use_local_ip: false
      quiet: false
      headers:
        'Access-Control-Allow-Origin': '*'
      watch_options:
        ignored: '**/node_modules/**'
  
  test:
    &lt;&lt;: *default
    compile: true
  
    # Compile test packs to a separate directory
    public_output_path: packs-test
  
  production:
    &lt;&lt;: *default
  
    # Production depends on precompilation of packs prior to booting for performance.
    compile: true
  
    # Extract and emit a css file
    extract_css: true
  
  
    # Cache manifest.json for performance
    cache_manifest: true
  
  </code></pre>