在Vuejs中实现全局CSS的最佳方法

Question

在Vuejs中实现全局CSS的最佳方法

cssimportvue.js

107

如何在Vuejs中为所有组件创建全局CSS文件（默认的背景颜色、按钮样式等）？

在index.html中导入CSS文件
在主组件中使用@import
将所有CSS放在主组件中（但那会是一个巨大的文件）

- Jordy

1

感谢@mods没有将此关闭为基于意见的。这实际上对我很有帮助。 - Tobias Feil

9个回答

43

我发现最好的方式是在assets文件夹中创建一个新文件，我创建了一个名为global.css的文件，但您可以根据自己的喜好命名。然后，在main.js中导入这个文件global.css。

注意：使用此方法，如果您认为global.css变得非常大，则可以创建多个文件，然后将所有这些文件都导入到main.js中。

@\assets\global.css

/* move the buttons to the right */
.buttons-align-right {
  justify-content: flex-end;
}

主要的.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './routes'

Vue.config.productionTip = false

// Importing the global css file
import "@/assets/global.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

- Coder Absolute

你知道这种方法是否与将其添加到 App.vue 中具有相同的效果吗？就像来自 @c24b 的上面的答案一样？ - darmis

抱歉，我还没有测试它是否具有相同的效果。但是，如果它们有意义的话，我更喜欢将我的文件分开。 - Coder Absolute

15

在 App.vue 中，您可以添加一个style属性来声明您的 CSS 文件：

<style>
  @import './assets/css/global.css';
</style>

- c24b

你知道这种方法是否与将其添加到 main.js 中具有相同的效果吗？@Coder Absolute 的答案意味着你也可以在这里添加更多的导入吗？ - darmis

2

这与 main.js 中的效果不完全相同，导入是按照导入声明的顺序执行的，而不是按照模板执行的顺序执行。 - c24b

5

在你的资产文件夹中创建一个新的CSS文件，例如：global.css
将 "global.css" 导入到 main.js 中

    import '@/assets/main.css';

- Omar Izem

请展示 main.css 文件的内部内容。 - parsecer

4

您还可以这样做：https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/。

我的文件夹大多都是这样组织的：

 - src
   - assets
     - _global.scss
     - _colors.scss
     - _fonts.scss
     - _paragraphs
     - index.scss // <-- import all other scss files.

这也适用于普通的CSS。

- PeeJee

4

小心 PeeJee，你提出的解决方案仅建议用于在整个应用程序组件中共享scss变量。更多信息请参见此处： https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/ “你必须确保在数据配置中导入的文件只包含不会被渲染的SASS代码，如变量、mixin和函数。否则，该代码将为每个组件重复生成...” - XaviPS

最终的后处理CSS文件。 - Baum mit Augen

谢谢您提供的信息，@XaviPS。我之前不知道！ - PeeJee

3

据我所知，有两种方法可以实现这个目标。

方法一

利用vue.config.js配置文件，可以使用sass替代less进行配置:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import '@/style/common.less';`
      }
    }
  }
}

方法二

在您的.vue文件中，让您的样式看起来像这样：

<style lang="less">
@import (reference) "../../style/variables.less";
#app {
  background: @bgColor;
}
</style>

注意：使用(reference)标志可使在variables.less中定义的变量生效。如果您没有变量，则@import "../../style/variables.less";就足以达到目的。

供您参考，您还可以查看此链接： https://github.com/tjcchen/vue-practice/tree/master/multipage-app

- user3932156

1

Sass宣布了他们的新模块系统。为什么不使用@use和@forward？

我的方法是使用vite最好的方式来使用scss。使用defineConfig设置全局scss（颜色，mixin），并在所有组件中重用，无需导入。

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/main.scss" as *;`,
      },
    },
  },

Here: code sandbox

- hungify

我正在学习Vue，并且已经实现了这个方法。当我在开发服务器上时，我可以看到同样的CSS被多次加载。这只会在开发服务器上发生吗？我还没有测试过我的代码的生产版本。 - undefined

当你使用@use "~/styles/main.scss" as *;时，相当于将所有的scss导入到你的文件中。因此，在styles文件夹中必须存储scss的变量。如果你想要为通用样式或重置样式进行设置，必须将其放入src/index.scss中。

// 在这里放置通用css或重置css。
:root {
  --danger: #fe2c55;
  --danger-dark: #d60032;
  --danger-light: #ff5c83;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

- undefined

0

在您的根目录中创建一个vue.config.js文件
在src文件夹内创建一个styles文件夹，您可以在此处创建全局样式文件，例如base.scss
要使用scss，请安装两个依赖项

npm install node-loader sass-loader

在你的 vue.config.js 文件中粘贴下面的代码

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

- MD SHAYON

我正在学习Vue，并且已经实现了这个方法。当我在开发服务器上时，我可以看到同样的CSS被加载了多次。这只会在开发服务器上发生吗？我还没有测试过我的代码的生产版本。 - undefined

0

在 HTML 页面的 <head> 部分内的 <link> 元素中添加 CSS。

<!DOCTYPE html>

<html lang="en">
  
  <head>
    <link rel="stylesheet" href="./src/assets/styles.css">
    /* ... */
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

</html>

- Kurowsky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- highFlyingSmurfs · Accepted Answer

150

在您的index.html中导入css，但如果您正在使用webpack，则可以在主js配置中导入样式表，所有组件都将获得css。

正如下面的评论建议的那样，如果使用webpack，将这个添加到main.js中即可：

import './assets/css/main.css';

- highFlyingSmurfs

19

谢谢！我正在使用webpack，所以在我的main.js文件中我写了require('./assets/css/main.css'); 现在它可以正常工作了。 - Jordy

2

@Jordy 我想最好的方法是使用sass-loader来完成。只需要几个步骤就可以完成。这里有详细的解决方案- https://dev59.com/wVkT5IYBdhLWcg3wMMyr#46015906 - Anish K.

9

@Jordy，使用import './assets/css/main.css'就可以完成任务，无需使用require。请注意不要改变原意，但需要使翻译内容更加通俗易懂。 - Aleksandar

一个例子对人们来说会很好。 - trainoasis

如果您打算使用历史模式，请勿使用您的索引文件。在刷新时会导致重大问题。永远使用 webpack！ - Ishmael

1

警告：好的解决方案。它可以运行。但是，如果您想要一个动态系统，例如不能将其放入响应承诺中。 - miltone