【发布时间】：2016-09-19 01:42:43
【问题描述】：
我知道这几乎不可能回答，因为我无法在全新安装默认 Stencil 主题时可靠地重现该问题，但我已经花了几个小时试图了解发生了什么。我希望有人可以提出任何可能导致问题的想法，以便我可以尝试从不同的角度进行调查。
这是我的主要assets/scss/theme.scss 文件的全部内容：
// Foundation CSS Framework
@import 'settings';
@import '../../node_modules/foundation-sites/scss/foundation';
@include foundation-everything;
// Custom Settings
@import 'customSettings';
// Libraries
@import '../../node_modules/magnific-popup/src/css/main';
@import '../../node_modules/slick-carousel/slick/slick';
// Custom Mixins
@import 'mixins';
// Utilities
@import 'utilities/utilities';
// Layouts
@import 'layouts/html';
@import 'layouts/header';
@import 'layouts/body';
@import 'layouts/footer';
@import 'layouts/home';
@import 'layouts/container';
@import 'layouts/category';
@import 'layouts/product';
@import 'layouts/cart';
// Components
@import 'components/type';
@import 'components/button';
@import 'components/panel';
@import 'components/callout';
@import 'components/carousel';
@import 'components/scrollTop';
@import 'components/modal';
@import 'components/topBanner';
@import 'components/mainNav';
@import 'components/headerInfo';
@import 'components/helpDropdown';
@import 'components/pageHeading';
@import 'components/icons';
@import 'components/breadcrumbs';
@import 'components/categoryImages';
@import 'components/rating';
@import 'components/productPrice';
@import 'components/productCard';
@import 'components/productGrid';
@import 'components/socialLinks';
@import 'components/referralProgram';
@import 'components/homeReviews';
@import 'components/homeCopy';
@import 'components/categorySort';
@import 'components/sidebarBlock';
@import 'components/pagination';
@import 'components/productHeader';
@import 'components/productHeaderBullets';
@import 'components/productOption';
@import 'components/productContentPreviewBox';
@import 'components/productMenubar';
@import 'components/productSubsection';
@import 'components/productDetails';
@import 'components/productFaqs';
@import 'components/productVideos';
@import 'components/productReviews';
@import 'components/scrollTop';
@import 'components/cart';
@import 'components/cartHeader';
@import 'components/cartButtons';
@import 'components/shippingEstimator';
@import 'components/cartCallouts';
@import 'components/cartProductSection';
@import 'components/loadingOverlay';
@import 'components/page';
此文件包含在我的 template/layout/base.html 文件的头部，如下所示：
{{{stylesheet '/assets/css/theme.css'}}}
当我加载我的网站时，一切都按预期工作。在模板服务器将样式表编译为 http://localhost:3000/stencil/theme/1/css/theme.css 的 css 后，页面会正确加载样式表。
接下来，我创建另一个名为 assets/scss/testing.scss 的 scss 文件。以下是该文件的完整内容：
@import 'settings';
.page-content {
.formContainer {
background-color: $light-gray;
border: 1px solid $dark-gray;
padding: 1rem;
max-width:500px;
margin:0 auto;
margin-top:40px;
}
button {
width: 100%;
margin-bottom: 0;
}
}
然后，我将这个文件包含在我的主布局的头部，就在theme.css 的调用下方，如下所示：
{{{stylesheet '/assets/css/theme.css'}}}
{{{stylesheet '/assets/css/testing.css'}}}
现在，当我刷新页面时，我看到以下 2 个问题：
1) stencil cli命令行输出如下错误：
{ [Error: ../../node_modules/foundation-sites/scss/foundation.scss doesn't exist!]
formatted: 'Error: ../../node_modules/foundation-sites/scss/foundation.scss doesn\'t exist!\n on line 3 of stdin\n>> @import \'../../node_modules/foundation-sites/scss/foundation\';\n --------^\n',
message: '../../node_modules/foundation-sites/scss/foundation.scss doesn\'t exist!',
column: 9,
line: 3,
file: 'stdin',
status: 1 }
2) 浏览器在尝试加载theme.css 文件时出错。状态为422 Unprocessable Entity。但是，如果我将浏览器直接导航到 http://localhost:3000/stencil/theme/1/css/theme.css，css 文件就在那里，并且看起来已经正确编译。
现在，如果我像这样在布局文件中切换样式表调用的顺序，一切都会正确加载：
{{{stylesheet '/assets/css/testing.css'}}}
{{{stylesheet '/assets/css/theme.css'}}}
无论我刷新页面多少次，错误都会完全消失并且永远不会出现。一旦我切换回原始顺序并刷新页面，错误就会再次出现。
更奇怪的是，命令行错误似乎总是引用theme.scss中的第一个@import语句，而testing.scss中不存在。例如，如果我现在将第二行从theme.scss 添加到testing.scss，则错误将更改为现在引用theme.scss 中的第三个导入。换句话说，如果我将 testing.scss 顶部的导入更改为：
@import 'settings';
@import '../../node_modules/foundation-sites/scss/foundation';
命令行错误现在显示为：
{ [Error: customSettings.scss doesn't exist!]
formatted: 'Error: customSettings.scss doesn\'t exist!\n on line 7 of stdin\n>> @import \'customSettings\';\n --------^\n',
message: 'customSettings.scss doesn\'t exist!',
column: 9,
line: 7,
file: 'stdin',
status: 1 }
如果我将customSettings 添加到导入列表中，错误将移至下一个：
@import 'settings';
@import '../../node_modules/foundation-sites/scss/foundation';
@import 'customSettings';
{ [Error: ../../node_modules/magnific-popup/src/css/main.scss doesn't exist!]
formatted: 'Error: ../../node_modules/magnific-popup/src/css/main.scss doesn\'t exist!\n on line 10 of stdin\n>> @import \'../../node_modules/magnific-popup/src/css/main\';\n --------^\n',
message: '../../node_modules/magnific-popup/src/css/main.scss doesn\'t exist!',
column: 9,
line: 10,
file: 'stdin',
status: 1 }
这种模式一直持续到列表的下方，直到我将来自theme.css 的每个导入都包含在testing.css 中。到那时，错误就消失了。如果在整个过程中的任何时候我更改布局中样式表的顺序，使testing.css 出现在theme.scss 之前，该错误也会消失。
更糟糕的是，这种行为并非 100% 一致。它在大多数的情况下始终如一地发生，但是在一段时间内我重新启动服务器或刷新页面后，它会正常运行，但只要我再次刷新，错误又回来了。
对我来说，这感觉像是模板服务器的某种问题，它缓存数据或类似的东西。正如我所说，我无法在全新安装的默认模板主题上重现它，所以我意识到这基本上是不可能获得帮助的，但此时我不知道还能去哪里。
有什么想法吗？
【问题讨论】：
标签： node.js sass bigcommerce node-sass