我希望能够在项目的任何文件中导入两种类型的文件。
import 'styles/index.scss';
import 'styles/build/_style.css'
使用Nextjs 7和Webpack 4记录即时消息非常重要（nextjs7附带）
在Nextjs 6中，我们曾经在next.config.js中使用
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const commonsChunkConfig = (config, test = /\.css$/) => {
config.plugins = config.plugins.map(plugin => {
if (
plugin.constructor.name === 'CommonsChunkPlugin' &&
plugin.minChunks != null
) {
const defaultMinChunks = plugin.minChunks;
plugin.minChunks = (module, count) => {
if (module.resource && module.resource.match(test)) {
return true;
}
return defaultMinChunks(module, count);
};
}
return plugin;
});
return config;
};
module.exports = withCSS(withSass({
webpack: (config, { isServer }) => {
config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
return config
}
}))
2020年3月
Nextjs v9.3也添加了对sass的支持。更多信息在这里
2020年1月更新
Nextjs v9.2添加了对CSS的本机支持。有关官方文档的更多信息
要开始在应用程序中使用CSS导入，请在pages / _app.js中导入CSS文件。
由于样式表本质上是全局的，因此必须将其导入“自定义”组件中。这是避免类名称和全局样式的顺序冲突所必需的。
如果您当前使用的是@ zeit / next-css，建议您从next.config.js和package.json中删除该插件，从而在升级时转为内置CSS支持。
这个简单的例子对我的作品具有next-sass和next-css并排
/next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withSass());
/pages/index.js
import '../styles.scss';
import '../styles.css';
export default () => {
return (
<div className="example-sass">
<h1 className="example-css">Here I am</h1>
</div>
);
};
/styles.css
.example-css {
background-color: #ccc;
}
/styles.scss
$font-size: 50px;
.example-sass {
font-size: $font-size;
}
/package.json
"dependencies": {
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next": "^7.0.2",
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
这是我在屏幕上看到的
希望这可以帮助！
附言：官方GitHub仓库上也有一些信息
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句