Почему так компилирует?

Question

[SM_ST]

подскажите, почему при сборке проекта, собирает скрипты и стили по папкам

<link href="/_nuxt/pages/id/_id/happy-clients/pages/id/_id/index/pages/index.870402f.css" rel="stylesheet" type="text/css">

<script charset="utf-8" src="/_nuxt/layouts/default/layouts/mobile-profile/layouts/profile.js"></script>

стили везде прописываю через $style module

<template>
  <div :class="$style.navCategory">
</ template>
<style lang="scss" module>
.navCategory {
  position: relative;
  width: 100%;
  height: 94px;
  margin: 40px 0 60px;
}
</style>

Answer 1

[Александр Талалаев]

Вы используете extractCSS - он по умолчанию вытаскивает каждый CSS по компонентно, можно исправить через принудительную отмену механизмов вебпака в splitChunks, в оф документации есть хак:

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

Comments

[SM_ST]

а чтобы этого избежать, писать стили в assets и подключать в css nuxt.config?

а как можно тогда захешировать стили как в module localIdentName: '[local]_[hash:base64:8]' ?

[Александр Талалаев]

SM_ST, если использовать scoped vue-loader всё сделает, стили. имена классов будут перегенированы так, чтобы быть уникальными для каждого компонента.

[SM_ST]

Александр Талалаев, вот такого плана U9QuFT? я хотел все стили сделать такими и глобальные и локальные

[Александр Талалаев]

SM_ST, ну вот, почитайте, там всё написано кратко: https://vue-loader.vuejs.org/guide/scoped-css.html
Попробуйте и посмотрите подходит или нет.
Ну и отдельно, nuxt же билдится вебпаком, так что можно расширять настройки, добавлять свои постобработчики и тп https://nuxtjs.org/faq/extend-webpack
Возможно среди nuxt modules есть что-то вам нужное.
В любом случе, конкретно главная цель атрибута scoped внутри файловых комопнентов, это убрать конфликты css. А какие-то глобальные стили я думаю нужно тогда уже модифицировать отдельно, через отдельные расширения webpack

[SM_ST]

Александр Талалаев, сделал через scoped но все ровно компонент вот так компилирует стили

<link rel="stylesheet" href="/_nuxt/layouts/default/layouts/mobile-default/layouts/mobile-profile/layouts/profile/pages/id/_id/products//369b502a.6a8855c.css">

[Александр Талалаев]

SM_ST, ох, так стоп. у меня уже башка не варит) Это тут типа отдыхаю, переключаясь от рабочего контекста хех.
Ты хочешь чтобы всё было в одном css или инлайн?
В секции build файла nuxt.config.js есть парамтр extractCSS ?

[SM_ST]

вот мой build

build: {
    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'
    }
  }

[SM_ST]

Александр Талалаев, сли ставлю
extractCSS: true,
то при сборке

chunk layouts/default/layouts/profile [extract-css-chunks-webpack-plugin]                 friendly-errors 17:35:04
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-0-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-0-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-0-4!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/modal/ProductPreviewModal.vue?vue&type=style&index=0&lang=scss&module=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-0-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-0-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-0-4!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/modal/BasketModal.vue?vue&type=style&index=0&lang=scss&module=true&
   - couldn't fulfill desired order of chunk group(s) layouts/profile
   - while fulfilling desired order of chunk group(s) layouts/default

[SM_ST]

Александр Талалаев, я хочу чтобы было инлайн тип как на rabota.,ru когда стили глобальные не в файлах а на странице в style

[Александр Талалаев]

SM_ST, смотри, выбор scoped или modules на это не влияет(я тут вообще уже попутал как раньше на реакте разбивал комопненты и структуру )
Нужные тебе параметры: splitChunks - он разруливает и оптимизирует чанки(в рамках понятий webpack)
и extractCSS - он как раз и управляет вытягиванием css из компонентов.
Если посмотришь в документацию там есть пример как вытащить css и засунуть их в один файл(через переопределения опций splitChunks в параметре cacheGroups) , но прошу заметить так не рекомендуют делать.
splitChunks - старается разбить всё оптимально, чтобы лишнее не грузилось на каждой странице.
Если проект небольшой, без всякого множества глобальных штук, то может ну его extractCSS

[Александр Талалаев]

SM_ST, а, ну тогда в топку ExtractCSS. По умолчанию инлайн

[SM_ST]

Получается если non run build делаю, то стали компонентов выводятся вот в такие файлы

<link rel="stylesheet" href="/_nuxt/layouts/default/layouts/mobile-default/layouts/mobile-profile/layouts/profile/pages/id/_id/products//369b502a.6a8855c.css">

А вот на работа ру там стили из шаблонов и компонентов выгружаются в head в

[Александр Талалаев]

SM_ST, так отключи extractCSS или поставь в false(так по умолчанию)
Плюс в секции css nuxt config засунь глобалки что используешь(у меня вот на одном проекте):

css: [
    '~assets/sass/style.sass',
    'slick-carousel/slick/slick.css',
  ]

[SM_ST]

Александр Талалаев, я так и сделал, а как быть с компонентами? Где стили пописаны в секции style scss scoped?

[Александр Талалаев]

SM_ST, они тоже по умолчанию не выводятся в отдельные css, инлайн изначально. А вот exctractCSS - как раз для того чтобы их вытаскивать в отдельные файлы. В базовых настройках стоит exctractCSS в false

[SM_ST]

Александр Талалаев, у меня его вообще нет в конфиге, нг все ровно вытаскивает в отдельные файлы

[Александр Талалаев]

SM_ST, так у вас же выше было:

...(!isDev && {
      extractCSS: {
        ignoreOrder: true
      }

[SM_ST]

Александр Талалаев, ага, убрал, но теперь при билде файлы в css [] они исчезли и перешли в код, как можно их оставить?