NUXT复制样式

本教程将介绍NUXT复制样式的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

NUXT复制样式 教程 第1张

问题描述

在我的NUXT项目中,似乎正在复制CSS,不仅在单个组件上,而且在编译时将样式从我的nuxt.config.js-style leResources->SCSS复制到head标记中。

对于NUXT2.0之前的版本和发布后的版本(当前版本:2.8.1),这似乎都是一个问题。我在Build上尝试了很多东西,但我肯定遗漏了一些东西.

我的全局样式配置:

module.exports = {
...
 styleResources: {
  scss: [
'~/styles/variables.scss',
'~/styles/normalize.scss',
'~/styles/forms.scss',
'~/styles/mixins.scss',
'~/styles/type.scss',
'~/styles/buttons.scss',
'~/styles/font.scss',
'~/styles/loader.scss'
  ],
 },
 build: {
  path: '',
  parallel: true,
  cache: true,

  optimization: {
minimize: true,
runtimeChunk: true,
concatenateModules: true,
splitChunks: {
 chunks: 'all',
 minSize: 30000,
 maxSize: 0,
 minChunks: 1,
 maxAsyncRequests: 20,
 maxInitialRequests: 3,
 automaticNameDelimiter: '~',
 name: true,
 cacheGroups: {
  vendors: {
test: /[/]node_modules[/]/,
priority: -10
  },
  default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
  }
 }
}
  },
  // extractCSS: true,
  optimizeCSS: true,
  publicPath: process.env.CDN_URL || '',
  /*
  ** Run ESLint on save
  */
  extend (config, { isDev, isClient }) {
if (isDev && isClient) {
 config.module.rules.push({
  enforce: 'pre',
  test: /.(js|vue)$/,
  // loader: 'pug-plain-loader',
  loader: 'eslint-loader',
  exclude: /(node_modules)/
 })
}
  },
  plugins: [
new webpack.ProvidePlugin({
 mapboxgl: 'mapbox-gl'
})
  ]
 }
...
}

!https://i.imgur.com/Uls5Kbl.png
!https://i.imgur.com/gcGR0La.png

最终目标显然不是重复的样式。

nuxt-style资源模块

推荐答案

仅用于在您的组件之间共享SCSS变量和混合。您不应在其中指定任何样式,而应改用CSS字段:

  styleResources: {
scss: [
 '~/styles/variables.scss',
 '~/styles/mixins.scss',
],
  },
  css: [
 '~/styles/normalize.scss',
 '~/styles/forms.scss',
 '~/styles/type.scss',
 '~/styles/buttons.scss',
 '~/styles/font.scss',
 '~/styles/loader.scss'
]

好了关于NUXT复制样式的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。