typescript - Vue Cli 3 typescript 。无法将 css/sass 导入 <script> block

Question

我使用 Vue Cli 3 使用 typescript 构建了新的 vue 应用程序。

当我尝试将 css 或 sass 导入我的 typescript 文件时:

import * as sassStyles from '@/assets/sass/my.module.scss';

出现以下错误:

Cannot find module

我找到了这篇文章 How to use CSS Modules with TypeScript and webpack但我不知道如何将它与抽象出 webpack 配置的 Vue Cli 3 集成。

知道要在 vue.config.js 中放入什么才能直接导入 css 和 sass 文件来阻止吗？

我需要使用 typings-for-css-modules-loader 而不是 css-loader。

Answer 1

导入文件本身(即 import '@/foo.scss')会自动将样式应用到当前组件，因此您实际上不需要对导入样式的引用。即:

// import * as sassStyles from '@/assets/sass/my.module.scss'; // DON'T DO THIS
import '@/assets/sass/my.module.scss';

demo

在 vue-cli 项目中添加对导入 Sass 文件的支持所需的唯一步骤是安装 sass和 sass-loader (无需额外配置):

npm i -S sass sass-loader

然后，您可以使用以下任一方法导入.scss 文件:

• <script> 导入:

<script>
  import '/path/to/foo.scss';
</script>

• <style 源>:

<style scoped src="/path/to/foo.scss" lang="scss"></style>

注意可选的scoped属性使样式仅适用于当前组件(如 CSS 模块)。