next.js使用 antd, 支持 css 和 scss
<p>项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的</p><p> </p>
<h3 id="配置下载">配置下载</h3>
<pre><code class="hljs nginx"><span class="hljs-comment"># <span class="hljs-comment">npm</span><span class="hljs-comment">
npm install css-loader node-sass <span class="hljs-variable">@zeit/next-css <span class="hljs-variable">@zeit/next-sass --save
<span class="hljs-comment"># yarn
yarn add css-loader node-sass <span class="hljs-variable">@zeit/next-css <span class="hljs-variable">@zeit/next-sass
</span></span></span></span></span></span></span></code></pre>
<p>在根目录下创建 next.config.js</p>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> withCSS = <span class="hljs-built_in">require(<span class="hljs-string">'@zeit/next-css');
<span class="hljs-keyword">const</span> withSass = <span class="hljs-built_in">require(<span class="hljs-string">'@zeit/next-sass');
<span class="hljs-built_in">module.exports = <span class="hljs-function"><span class="hljs-params">() => withSass(withCSS())</span></span></span></span></span></span></span></code></pre>
<p><span style="position: relative; left: -100000px">广州包装设计公司http://www.maiqicn.com</span> <span style="position: relative; left: -100000px">电脑刺绣绣花厂 ttp://www.szhdn.com</span></p>
<h3 id="引入-antd">引入 antd</h3>
<pre><code class="hljs nginx"><span class="hljs-comment"># npm
<span class="hljs-attribute">npm install antd --sava
<span class="hljs-comment"># yarn
yarn add antd
</span></span></span></code></pre>
<h3 id="引入-babel">引入 babel</h3>
<pre><code class="hljs nginx"><span class="hljs-comment"># npm
<span class="hljs-attribute">npm install babel-plugin-import --save
<span class="hljs-comment"># yarn
yarn add babel-plugin-import
</span></span></span></code></pre>
<p>在根目录创建 .babelrc</p>
<pre><code class="hljs json">{
<span class="hljs-attr">"presets":[<span class="hljs-string">"next/babel"],
<span class="hljs-attr">"plugins":[
[
<span class="hljs-string">"import",
{
<span class="hljs-attr">"libraryName":<span class="hljs-string">"antd"
}
]
]
}
</span></span></span></span></span></span></code></pre>
<p>接下来就可以开心的使用 antd 和 scss了</p><br><br>
来源：https://www.cnblogs.com/Qooo/p/13765862.html
頁:
[1]