造成错误的样式表的Bigcommerce模板顺序-电脑我帮您

造成错误的样式表的Bigcommerce模板顺序

我知道这几乎是不可能的回答因为我不能可靠地重现上一个干净的问题安装默认模板主题，但我一直盯着它几个小时试图了解发生了什么事情。我希望有人可以建议他们有什么想法，可能是问题的原因，所以我可以尝试从不同的角度进行调查。

这是我的主要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）模版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'}}}

错误完全消失，永不不管多少次，我刷新页面显示出来。当我切换回原来的顺序并刷新页面，错误出现一次。

更为奇特的，似乎是在命令行中的错误总是引用在@import第一theme.scss语句不存在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％一致。它发生一贯的大部分时间，但也出现了，我重新启动服务器或不刷新了一段时间后刷新页面，并事情正常工作，但只要我再次刷新，错误回来随机时间。

对我来说，这种感觉就像某种与模板服务器问题，它缓存数据，或者类似的东西。正如我所说的，我不能重现上全新安装的默认模板主题，所以我知道这基本上是不可能得到的帮助，但在这一点上，我不知道还有什么地方可以转。

有任何想法吗？

回答如下：

我知道这是一个老问题，但万一别人的土地在这里寻找一个修复......我们的Bigcommerce主题零星经历了同样的问题，并修复了今天解决了该问题被添加到模版CLI软件包。

问题：https://github/bigcommerce/stencil-cli/issues/404提交：https://github/bigcommerce/stencil-cli/pull/436

如果更新模板，CLI为> = v1.15.5的问题应该得到解决。

感谢https://github/2ps的承诺。