配置nuxt的样式加载器
时间: 2024-01-02 17:52:51 浏览: 25
在 nuxt.config.js 文件中添加以下代码:
```
module.exports = {
build: {
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
// Add SCSS loader
config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
})
}
},
// Add global CSS
css: [
'@/assets/scss/main.scss'
]
}
```
这个配置会:
1. 在开发模式下使用 ESLint 进行代码检查
2. 添加 SCSS 样式加载器
3. 加载全局样式文件 `main.scss`
注意:需要先安装 `sass-loader`,`css-loader` 和 `vue-style-loader`。
```
npm install sass-loader css-loader vue-style-loader --save-dev
```