模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js)
Posted
技术标签:
【中文标题】模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js)【英文标题】:Module build failed (from ./node_modules/sass-loader/dist/cjs.js) 【发布时间】:2020-08-14 18:10:27 【问题描述】:我正在尝试在 Windows 10 上运行我的 Angular 9 应用程序,但在尝试在本地提供它时出现以下错误。看看下面的错误:
./src/assets/sass/pickandpay.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??嵌入式!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/assets/sass/pickandpay.scss) : SassError:未定义的变量:“$white-color”。 在 src/assets/sass/pickandpay/_base.scss 的第 99 行 从 H:\pick&pay_eCommerce\pickandpay-client\src\assets\sass\pickandpay.scss 的第 3 行 颜色:$white-color; ---------^
pickandpay.scss:
// Core CSS
@import "pickandpay/base";
@import "pickandpay/blog-details";
@import "pickandpay/blog-sidebar";
@import "pickandpay/blog";
@import "pickandpay/breadcrumb";
@import "pickandpay/checkout";
@import "pickandpay/contact";
@import "pickandpay/footer";
@import "pickandpay/header";
@import "pickandpay/hero";
@import "pickandpay/home-page";
@import "pickandpay/mixins";
@import "pickandpay/responsive";
@import "pickandpay/shop-details";
@import "pickandpay/shop-grid";
@import "pickandpay/shoping-cart";
@import "pickandpay/sidebar";
@import "pickandpay/variable";
@import "pickandpay/style.scss";
_base.scss:
html,
body
height: 100%;
font-family: 'Cairo', sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
h1,
h2,
h3,
h4,
h5,
h6
margin: 0;
color: #111111;
font-weight: 400;
font-family: 'Cairo', sans-serif;
h1
font-size: 70px;
h2
font-size: 36px;
h3
font-size: 30px;
h4
font-size: 24px;
h5
font-size: 18px;
h6
font-size: 16px;
p
font-size: 16px;
font-family: 'Cairo', sans-serif;
color: #6f6f6f;
font-weight: 400;
line-height: 26px;
margin: 0 0 15px 0;
img
max-width: 100%;
input:focus,
select:focus,
button:focus,
textarea:focus
outline: none;
a:hover,
a:focus
text-decoration: none;
outline: none;
color: $white-color;
ul,
ol
padding: 0;
margin: 0;
/*---------------------
Helper CSS
-----------------------*/
.section-title
margin-bottom: 50px;
text-align: center;
h2
color: $normal-color;
font-weight: 700;
position: relative;
&:after
position: absolute;
left: 0;
bottom: -15px;
right: 0;
height: 4px;
width: 80px;
background: $primary-color;
content: "";
margin: 0 auto;
.set-bg
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
.spad
padding-top: 100px;
padding-bottom: 100px;
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a
color: #fff;
/* buttons */
.primary-btn
display: inline-block;
font-size: 14px;
padding: 10px 28px 10px;
color: $white-color;
text-transform: uppercase;
font-weight: 700;
background: $primary-color;
letter-spacing: 2px;
.site-btn
font-size: 14px;
color: $white-color;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
padding: 13px 30px 12px;
background: $primary-color;
border: none;
/* Preloder */
#preloder
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999999;
background: #000;
.loader
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
border-radius: 60px;
animation: loader 0.8s linear infinite;
-webkit-animation: loader 0.8s linear infinite;
@keyframes loader
0%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border: 4px solid #f44336;
border-left-color: transparent;
50%
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border: 4px solid #673ab7;
border-left-color: transparent;
100%
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border: 4px solid #f44336;
border-left-color: transparent;
@-webkit-keyframes loader
0%
-webkit-transform: rotate(0deg);
border: 4px solid #f44336;
border-left-color: transparent;
50%
-webkit-transform: rotate(180deg);
border: 4px solid #673ab7;
border-left-color: transparent;
100%
-webkit-transform: rotate(360deg);
border: 4px solid #f44336;
border-left-color: transparent;
我试着用谷歌搜索它并做了所有的事情,但没有找到任何解决方案。
节点-v12.16.1
Angular CLI 9.1.4 版
【问题讨论】:
【参考方案1】:您似乎还没有定义变量$white-color
。如果您需要更深入的帮助,提供pickandpay.scss
文件会有所帮助。
【讨论】:
做到了..现在看看 看来$white-color
确实没有在您当前的文件中定义。您可以在此文件中定义它或删除对它的引用。【参考方案2】:
这是由于引导冲突引起的问题。
【讨论】:
以上是关于模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js)的主要内容,如果未能解决你的问题,请参考以下文章
如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”
错误:模块构建失败(来自 ./node_modules/mini-css-extract-plugin/dist/loader.js):
如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”
Rails Tailwind 设置:模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):
模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js
带有 babel 的 webpack 显示错误模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):