vue cli not extract css

[igor2104]

I use vue cli. If I run yarn serve styles insert in DOM. But if I run yarn build css not generate.

{
  "name": "uikit",
  "version": "1.0.3",
  "description": "",
  "main": "dist/uikit.umd.min.js",
  "browser": "dist/uikit.umd.min.js",
  "module": "dist/uikit.umd.min.js",
  "unpkg": "dist/uikit.umd.min.js",
  "files": [
    "dist/*",
    "src/assets/scss/abstracts/*",
    "src/components/*.vue"
  ],
  "sideEffects": [
    "*.vue"
  ],
  "scripts": {
    "serve": "vue-cli-service serve dev/serve.js",
    "build": "vue-cli-service build --target lib --name uikit src/entry.js",
    "story": "start-storybook -p 6006",
    "build-story": "build-storybook"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@storybook/addon-actions": "^6.3.3",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.3.3",
    "@storybook/vue": "^6.1.21",
    "@vue/cli-plugin-babel": "^4.5.10",
    "@vue/cli-service": "^3.12.1",
    "@whitespace/storybook-addon-html": "^5.0.0",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "minimist": "^1.2.5",
    "sass": "^1.35.2",
    "sass-loader": "10.1.1",
    "storybook-addon-designs": "^6.0.1",
    "storybook-addon-paddings": "^4.2.1",
    "storybook-addon-pseudo-states": "^1.0.0",
    "storybook-dark-mode": "^1.0.8",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.12",
    "webfonts-loader": "^7.3.0"
  },
  "peerDependencies": {
    "vue": "^2.6.12"
  },
  "engines": {
    "node": ">=12"
  }
}

vue.config.js

const path = require('path')

function initConfig() {
  const rootDir = path.resolve(__dirname, "./src/")
  const assetsDir = path.join(rootDir, 'assets')
  return {
    rootDir: rootDir,
    assetsDir: assetsDir,
    globalStyles: [
      '@scss/abstracts',
    ]
  }
}

function loadGlobalStyles() {
  return settings.globalStyles.map(path => `@import "${path}";`).join('\n')
}

const settings = initConfig()
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: loadGlobalStyles()
      }
    }
  },
  chainWebpack: config => {
    config
      .entry('app')
      .clear()
      .add('./src/entry.js')
      .end()
    config.module
      .rule('js')
      .exclude
      .add(/\.font\.js$/)
      .end()
    config.module
      .rule('font-icons')
      .test(/\.font\.js$/)
      .use('css-extract')
      .loader(
        process.env.NODE_ENV === 'development'
          ? 'vue-style-loader'
          : require('mini-css-extract-plugin').loader
      )
      .end()
      .use('css-loader')
      .tap(options => {
        return {
          url: false
        };
      })
      .loader('css-loader')
      .end()
      .use('webfonts-loader')
      .loader('webfonts-loader')
      .end()
    config.resolve.alias
      .set("@", settings.rootDir)
      .set("@assets", settings.assetsDir)
      .set("@scss", path.join(settings.assetsDir, 'scss'))
      .set("@fonts", path.join(settings.assetsDir, 'fonts'))
      .set("@images", path.join(settings.assetsDir, 'images'))
    config.devServer
      .open(true)
  }
}

icon.font.js

module.exports = {
  files: ['./assets/icons/*.svg'],
  fontName: 'iconfont',
  classPrefix: 'ico-',
  baseSelector: '.ico',
  types: ['woff'],
  fileName: '[fontname].[hash].[ext]',
}

what am I doing wrong?

[igor2104]

I'm solved a problem. In my entry.js, I replaced import './icon.font' => require('./icon.font')