Vue.js 从节点模块导入 CSS

当我们使用 Vue.js 开发前端应用程序时，通常需要在项目中使用 CSS 样式。有时，我们可能需要从节点模块导入 CSS 文件，以便在应用程序中使用这些样式。在本文中，将介绍如何从节点模块导入 CSS 文件，并在 Vue.js 应用程序中使用这些样式。

步骤

1. 首先，需要安装 css-loader 和 style-loader 这两个 npm 包，这两个包是用来将 CSS 文件打包到应用程序中的。

npm install css-loader style-loader --save-dev

2. 在 vue.config.js 文件中添加以下代码，用来配置 webpack 以加载 CSS 文件。

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .use("style-loader")
      .loader("style-loader")
      .end()
      .use("css-loader")
      .loader("css-loader")
      .options({
        modules: true,
      })
      .end();
  },
};

3. 在 Vue.js 组件中导入 CSS 文件。

import styles from "./style.css";

export default {
  data() {
    return {
      message: "Hello Vue.js!",
    };
  },
  methods: {},
  render() {
    return (
      <div class={styles.container}>
        <h1 class={styles.title}>{this.message}</h1>
      </div>
    );
  },
};

在上面的代码中，我们从 CSS 文件中导入样式，并使用 styles 对象来引用这些样式。然后，在 render 函数中，我们使用 class={styles.container} 和 class={styles.title} 来将样式应用到 HTML 元素上。

结论

通过以上步骤，我们可以轻松地从节点模块导入 CSS 文件，并在 Vue.js 应用程序中使用这些样式。同时，通过使用 css-loader 和 style-loader，我们可以将 CSS 文件打包到应用程序中，从而提高应用程序的性能和可靠性。

完整代码片段：

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .use("style-loader")
      .loader("style-loader")
      .end()
      .use("css-loader")
      .loader("css-loader")
      .options({
        modules: true,
      })
      .end();
  },
};

// style.css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.title {
  font-size: 2rem;
}

// App.vue
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import styles from "./style.css";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  render() {
    return (
      <div class={styles.container}>
        <h1 class={styles.title}>Hello Vue.js!</h1>
      </div>
    );
  },
};
</script>