Vue.js 为什么在推送到生产环境（AWS）时不在Nuxt中应用/编译SCSS类？

我正在用Nuxt.js开发一个网站。在本地提供应用程序时，SCS会完美地编译并应用到页面上。在我的

index.vue

和其他组件中，样式（SCS）的范围是

的

当我将站点部署到生产环境中时，突然发现所有样式（范围）都不起作用了！但是，如果我删除范围为的

，它也会在prod上工作。但这感觉不对，它完全违反了定义样式范围的概念

有人能帮我吗？我怎样才能解决这个问题？我怀疑在构建应用程序时一定要做些什么。

这是我的numxt.config.js

import path from 'path';

import PurgecssPlugin from 'purgecss-webpack-plugin';
import glob from 'glob-all';
import shrinkRay from 'shrink-ray-current';

require('dotenv').config();

export default {
  mode: 'universal',
   ...
   ...
   ...
  css: ['@/assets/scss/app.scss'],
  plugins: [
    { src: '~/plugins/vue-social-sharing', mode: 'client' },
    { src: '~/plugins/Vuelidate' },
    { src: '~/constants', mode: 'client' },
    { src: '~plugins/ga.js', mode: 'client' }
  ],
  buildModules: [
    // // Doc: https://github.com/nuxt-community/eslint-module
    // '@nuxtjs/eslint-module',
    // // Doc: https://github.com/nuxt-community/stylelint-module
    // '@nuxtjs/stylelint-module'
  ],
  /* Nuxt.js modules */
  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@nuxtjs/dotenv', 'nuxt-lazy-load'],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  build: {
    extractCSS: true,
    extend(config, { isDev, isClient }) {
      if (!isDev && isClient) {
        config.plugins.push(
          new PurgecssPlugin({
            paths: glob.sync([
              path.join(__dirname, './pages/**/*.vue'),
              path.join(__dirname, './layouts/**/*.vue'),
              path.join(__dirname, './components/**/*.vue')
            ]),
            whitelist: ['html', 'body']
          })
        );
      }
    }
  }
};


看起来清除css正在提取所有css。试着评论一下，看看事情是否奏效。