Vue Cli 3 打字稿。无法将 css/sass 导入 <script> 块

Posted 2023-02-22

【中文标题】Vue Cli 3 打字稿。无法将 css/sass 导入 <script> 块

【英文标题】：Vue Cli 3 Typescript. Cannot import css/sass to the <script> block

【发布时间】：2018-12-23 06:32:41

【问题描述】：

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

当我尝试将 css 或 sass 导入我的打字稿文件时：

从 '@/assets/sass/my.module.scss' 导入 * 作为 sassStyles；

我收到以下错误：

找不到模块

我找到了这篇文章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。

【参考方案1】：

在您的项目中创建一个文件，例如 ambient.d.ts（我的约定，但您可以将其命名为任何名称），内容如下：

declare module "@/assets/sass/*.scss" 
  const styles: any;
  export = styles;


declare module "@/assets/css/*.css" 
  const styles: any;
  export = styles;

调整导出的类型和形式以最符合您的使用情况。

【参考方案2】：

导入文件本身（即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>
  import '/path/to/foo.scss';
</script>

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

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

【参考方案3】：

尝试在您的项目根目录中添加一个名为 vue.config.js 的新文件。

在文件中，添加以下内容：

const path = require('path');

module.exports = 
  css: 
    loaderOptions: 
      sass: 
        includePaths: [
          path.resolve(__dirname, 'PATH_TO_WHERE_YOUR_SCSS_FILES_ARE'),
        ],
      ,
    ,
  ,
;

我在尝试从位于node_modules/@material 的@material 导入scss 文件时遇到了类似的问题，经过两天的挖掘，我找到了这个Github issue 并尝试了一下，并且我将'node_modules' 用作PATH_TO_WHERE_YOUR_SCSS_FILES_ARE，它解决了我的问题。