nextJs:内置scss配置_nextjs scss

首先 确保本地有sass

npm i sass --save
1

由于nextJs有内置sass，所以只用在配置next.config.js里面打开即可

const path = require('path')
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}
1
2
3
4
5
6

全局scss引入：
在_app.js 中引入：

import '../styles/ab.scss'
1

如果sass不想要全局引入，需要将scss写成组件形式 即后缀名是 XX.module.scss
组件式引入：

import styles from './index.module.scss'
export default function Homeokok() {
  return (
    <div className={styles.b}>
     a
    </div>
  )
}
1
2
3
4
5
6
7
8

加了module后缀，不会造成全局样式的污染。