Как закомпиоировать из scss в css файлы в Nuxt?

Question

[Максим]

Подскажите, сейчас при разработке стили пишу в scss

css: [
    '@/assets/desktop/button.scss'
]

можно ли настроить как-то, чтобы на выходе у меня был файл button.css

в nuxt.config сейчас так

build: {
    filenames: {
      app: ({ isDev }) => isDev ? '[name].js' : 'js/[contenthash].js',
      chunk: ({ isDev }) => isDev ? '[name].js' : 'js/[contenthash].js',
      css: ({ isDev }) => isDev ? '[name].css' : 'css/[contenthash].css',
      img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
      font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
      video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
    },
    // extractCSS: true,
    extend(config, ctx) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/,
        options: {
          fix: true
        }
      })
    },
    loaders: {
      cssModules: {
        modules: {
          localIdentName: "[hash:base64:6]",
        }
      }
    },
    ...(!isDev && {
      html: {
        minify: {
          collapseBooleanAttributes: true,
          decodeEntities: true,
          minifyCSS: true,
          minifyJS: true,
          processConditionalComments: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true,
          trimCustomFragments: true,
          useShortDoctype: true
        }
      }
    }),
    splitChunks: {
      layouts: true,
      pages: true,
      commons: true
    },
    optimization: {
      minimize: !isDev
    },
    // ...(!isDev && {
    //   extractCSS: {
    //     ignoreOrder: true
    //   }
    // }),
    postcss: {
      plugins: {
        ...(!isDev && {
          cssnano: {
            preset: ['advanced', {
              autoprefixer: false,
              cssDeclarationSorter: false,
              zindex: false,
              discardComments: {
                removeAll: true
              }
            }]
          }
        })
      },
      ...(!isDev && {
        preset: {
          browsers: 'cover 99.5%',
          autoprefixer: true
        }
      }),

      order: 'cssnanoLast'
    }
  }

Comments

[Алекс Глебов]

Nuxt подключает стили прямо к страницам, либо в каждый компонент через styleResources. Не понятно зачем вам css.

Answer 1

[Стефан]

При сборке он сам и так закомпилит все в css, не надо ничего делать

Answer 2

[Александр Дергунов]

Советую почитать это https://nuxtjs.org/docs/2.x/configuration-glossary...