https://github.com/forthedamn/next-typed-css

Import `.css .scss` files in your Next.js project with typed css or sass
https://github.com/forthedamn/next-typed-css

css css-module next next-css next-plugin next-sass sass typed-css typescript

Last synced: 2 days ago
JSON representation

Import `.css .scss` files in your Next.js project with typed css or sass

• Host: GitHub
• URL: https://github.com/forthedamn/next-typed-css
• Owner: forthedamn
• Created: 2018-08-08T07:23:56.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-22T13:52:26.000Z (about 1 year ago)
• Last Synced: 2024-08-23T21:28:10.001Z (about 1 month ago)
• Topics: css, css-module, next, next-css, next-plugin, next-sass, sass, typed-css, typescript
• Language: JavaScript
• Homepage:
• Size: 264 KB
• Stars: 13
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Next.js + CSS or Sass + Typescript

### next-typed-css@latest Support next.js 7 & 8

> next.js 6 plz use [email protected] *

Import `.css(.css)` files in your Next.js project with TypeScript typings

Fork from next-typed-css and change node-sass to sass.

![https://s0.meituan.net/bs/tempfs/file/zhongguoxin/cap1.gif](https://s0.meituan.net/bs/tempfs/file/zhongguoxin/cap1.gif)

## Installation

```

npm install --save next-typed-css

```

or

```

yarn add next-typed-css

```

## Usage with CSS

Most config same as [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)

## Difference

### Use typings CSS with Typescript

Typing css based on [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader)

```

// next.config.js

const withCSS = require('next-typed-css')

module.exports = withCSS({

  // no need to set 'cssModule: true' again

  tCssModules: true

  ignoreDts: true,

  cssLoaderOptions: {

    // typings-for-css-modules-loader config here

    namedExport: true,

  }

})

```

## Usage with Sass

Most config same as [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)

## Difference

### Use typings Sass with Typescript

```

// next.config.js

const withSass = require('next-typed-css/sass')

module.exports = withSass({

  // no need to set 'cssModule: true' again

  tCssModules: true,

   ignoreDts: true,

  cssLoaderOptions: {

    // typings-for-css-modules-loader config here

    namedExport: true

  }

})

```