独书先生 Menu

Viewing all items for tag sass

Typescript CSS module 问题,VSCODE提示 cannot find module ‘XXX.scss’ or its corresponding type declarations

问题

在Typescript + Webpack + Sass项目中使用CSS Module,可以正常引入CSS模块使用,但是vscode总是提示 cannot find module ‘XXX.scss’ or its corresponding type declarations。

解决方案

方案一

1、首先要确保webpack和sass已经能够识别CSS Module,参考webpack官网配置即可 Separating Interoperable CSS-only and CSS Module features

2、配置d.ts
重点来了,这里要注意配置两个d.ts文件
一、主文件index.d.ts

    declare module '*.scss' {
        const content: { [key: string]: any }
        export = content
    }
    

二、同级目录再新增一个typings.d.ts文件

    declare module '*.scss';
    

这样配置后,已经解决了笔者的问题,VSCODE和Node命令行界面都不会报错,而且能正常匹配

方案二

网络推荐的解决方案是在css文件同级目录编写d.ts文件,通常使用插件来自动完成

以下插件选择其一即可
1. webpack插件 typings-for-css-modules-loader
2. webpacl插件 css-modules-typescript-loader
3. 可能需要的插件,Typescript插件 typescript-plugin-css-modules(笔者用了没有效果)

通常安装完插件自动生成每个css的声明文件后,就不会报错了,但是有两个缺点,一是项目文件太多,二是路径别名还是无法被VSCODE识别(Node命令行正常),这个必须是如上配置两个d.ts才能让VSCODE不提示错误。

参考

一些可能的scss文件声明写法

//写法一
declare module '*.scss';

//写法二
declare module '*.scss' {
    const content: any;
    export default content;
}

//写法三
declare module '*.scss' {
    const content: Record;
    export default content;
}

//写法三
declare module '*.scss' {
    const content: { [key: string]: any }
    export = content
}

一些回答 cant-import-css-scss-modules-typescript-says-cannot-find-module

node-gyp node-sass安装指南

问题

npm install --global --production windows-build-tools报错

MSI (s) (14:10) [20:36:04:711]: Product: Python 2.7.15 (64-bit) -- Installation failed.

MSI (s) (14:10) [20:36:04:712]: Windows Installer 已安装产品。产品名称: Python 2.7.15 (64-bit)。产品版本: 2.7.15150。产品语言: 1033。制造商: Python Software Foundation。安装成功或错误状态: 1603。

安装时发生严重错误
C:\Users\14145\.windows-build-tools\python-2.7.15.amd64.msi

解决

1.自行下载python2.7.15版本的重装
淘宝镜像站快速下载地址:https://npm.taobao.org/mirrors/python/2.7.15/

2.设置多python
https://blog.csdn.net/qq_27474589/article/details/72583014

3.重新 npm install --global --production windows-build-tools

可能搭配的命令

  1. npm config set msvs_version 2012 --global
  2. npm config set msvs_version 2017
  3. npm install node-pre-gyp -g
  4. 有的依赖比较大,但是国内的网络环境收到了限制,可以参考此篇教程采用更科学的方式
    > 强烈推荐:彻底解决npm下载问题

其他解决思路

一、重新安装
1. npm cache clean --force
2. 删除项目中的 node_modules (如何快速删除node_modules)
3. 删除 package-lock.jsona
4. 重新 npm install

二、node-sass换成sass
1.先卸载node-sass: npm uninstall node-sass -g
2.再安装sass: npm install sass -g

node-gyp

教程链接:https://github.com/nodejs/node-gyp

nuxt sass全局引入不起作用bug

问题

nuxt 全局引入sass时,官方例子有bug, github上已经有各种讨论,有很多方法是旧版本的解决方案,无法使用

解决方案

基于 nuxt 2.0.0版本的解决方案

步骤一

安装npm包

npm i -D @nuxtjs/style-resources sass-loader node-sass

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: ['@nuxtjs/style-resources'],
    styleResources: {
        scss: [
            'assets/css/global.scss',
            'assets/css/main.scss'
        ]
    }
}

扩展

附上2.0.0之前的旧版本的配置,可能有用,未尝试,但是 2.0.0 版本没有用

步骤一

安装npm包

npm i nuxt-sass-resources-loader

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: [
        [
            'nuxt-sass-resources-loader', 
            [
                'assets/css/global.scss',
                'assets/css/main.scss'
            ]åç
        ]
    ]
}