@shixinde/vuepress-theme-init/docs/assets/浏览器px to rem适配.html-DPzD4TkF.js

### 其他开源项目

import{_ as s,c as n,o as a,a as e}from"./app-Dx9bNbfq.js";const p={},t=e(`<h2 id="使用postcss-px2rem适配已经做成功1920-1080适配为rem" tabindex="-1"><a class="header-anchor" href="#使用postcss-px2rem适配已经做成功1920-1080适配为rem"><span>使用<code>postcss-px2rem</code>适配已经做成功<code>1920*1080</code>适配为rem</span></a></h2><p>要使<code>postcss-px2rem</code>生效，您需要确保已经在项目中安装了<code>postcss-loader</code>和<code>postcss-px2rem</code>。然后，您需要在<code>webpack.config.js</code>中配置它们。以下是修改后的示例：</p><ol><li>首先，确保已经安装了<code>postcss-loader</code>：</li></ol><p>InsertCopy</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">npm install postcss<span class="token operator">-</span>loader <span class="token operator">--</span>save<span class="token operator">-</span>dev</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><ol><li>然后，在<code>webpack.config.js</code>中配置<code>postcss-loader</code>：</li></ol><p>InsertCopy</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;path&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// ...</span></span>
<span class="line"> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">   <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">     <span class="token comment">// ...</span></span>
<span class="line">     <span class="token punctuation">{</span></span>
<span class="line">       <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span></span>
<span class="line">       <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">         <span class="token string">&#39;vue-style-loader&#39;</span><span class="token punctuation">,</span></span>
<span class="line">         <span class="token string">&#39;css-loader&#39;</span><span class="token punctuation">,</span></span>
<span class="line">         <span class="token string">&#39;postcss-loader&#39;</span> <span class="token comment">// 添加此行</span></span>
<span class="line">       <span class="token punctuation">]</span></span>
<span class="line">     <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">     <span class="token comment">// ...</span></span>
<span class="line">   <span class="token punctuation">]</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// ...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li>接下来，确保已经安装了<code>postcss-px2rem</code>：</li></ol><p>InsertCopy</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">npm install postcss<span class="token operator">-</span>px2rem <span class="token operator">--</span>save<span class="token operator">-</span>dev</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><ol><li>在<code>postcss.config.js</code>中配置<code>postcss-px2rem</code>：</li></ol><p>InsertCopy</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">   <span class="token literal-property property">autoprefixer</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token string-property property">&#39;postcss-px2rem&#39;</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">     <span class="token literal-property property">remUnit</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token comment">// 设置rem单位为16</span></span>
<span class="line">     <span class="token literal-property property">viewBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 关闭viewBox</span></span>
<span class="line">     <span class="token literal-property property">selectorBlackList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;.ignore&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;.hairlines&#39;</span><span class="token punctuation">]</span> <span class="token comment">// 排除特定选择器</span></span>
<span class="line">   <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li>确保在<code>vue.config.js</code>中配置了<code>css.loaderOptions</code>：</li></ol><p>InsertCopy</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">   <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">     <span class="token literal-property property">postcss</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">       <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">         <span class="token comment">// ...</span></span>
<span class="line">         <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;postcss-px2rem&#39;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">           <span class="token literal-property property">remUnit</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span></span>
<span class="line">           <span class="token literal-property property">viewBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
<span class="line">           <span class="token literal-property property">selectorBlackList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;.ignore&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;.hairlines&#39;</span><span class="token punctuation">]</span></span>
<span class="line">         <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">         <span class="token comment">// ...</span></span>
<span class="line">       <span class="token punctuation">]</span></span>
<span class="line">     <span class="token punctuation">}</span></span>
<span class="line">   <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在，<code>postcss-px2rem</code>应该已经生效了。</p><p>如果您已经按照上述步骤配置了<code>postcss-px2rem</code>，但仍然没有看到效果，那么可能是因为以下原因：</p><ol><li>确保您的<code>postcss.config.js</code>文件位于项目的根目录下。</li><li>确保您的<code>webpack.config.js</code>文件也位于项目的根目录下。</li><li>确保您的<code>vue.config.js</code>文件也位于项目的根目录下。</li><li>确保您的<code>package.json</code>文件中包含了<code>postcss-loader</code>和<code>postcss-px2rem</code>的依赖。</li><li>清除浏览器缓存，以便新的配置生效。</li></ol><p>如果问题仍然存在，请检查控制台输出中是否有关于<code>postcss-px2rem</code>的错误信息。</p>`,21),l=[t];function o(c,i){return a(),n("div",null,l)}const d=s(p,[["render",o],["__file","浏览器px to rem适配.html.vue"]]),u=JSON.parse('{"path":"/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E6%B5%8F%E8%A7%88%E5%99%A8px%20to%20rem%E9%80%82%E9%85%8D.html","title":"浏览器适配 pxtorem","lang":"zh-CN","frontmatter":{"title":"浏览器适配 pxtorem","date":"2022-12-29T00:00:00.000Z","tags":["pxtorem","笔记","浏览器适配"],"categories":["自学篇"]},"headers":[{"level":2,"title":"使用postcss-px2rem适配已经做成功1920*1080适配为rem","slug":"使用postcss-px2rem适配已经做成功1920-1080适配为rem","link":"#使用postcss-px2rem适配已经做成功1920-1080适配为rem","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"常用笔记/浏览器px to rem适配.md","excerpt":"<h2>使用<code>postcss-px2rem</code>适配已经做成功<code>1920*1080</code>适配为rem</h2>\\n<p>要使<code>postcss-px2rem</code>生效，您需要确保已经在项目中安装了<code>postcss-loader</code>和<code>postcss-px2rem</code>。然后，您需要在<code>webpack.config.js</code>中配置它们。以下是修改后的示例：</p>\\n<ol>\\n<li>首先，确保已经安装了<code>postcss-loader</code>：</li>\\n</ol>\\n<p>InsertCopy</p>"}');export{d as comp,u as data};