Question

我正在使用Webpacker（运行webpack）将为团队编写的一些SCSS代码迁移到我们的rails应用程序中，并且遇到了一些问题。这可能很容易，但是我对SCSS和Webpack有点不熟悉，因此一直引起一些麻烦。

我有一个application.css文件，如下所示：

@import "./base/_fonts.scss";
@import "./base/_typography.scss";
@import "./base/_transition.scss";
@import "./base/_grid.scss";
@import "./base/_space.scss";
@import "./base/_link.scss";
...

在“ _transition.scss”内部：

// Timing
.timing {
  &-1 {
    transition-timing-function: ease;
  }

  &-2 {
    transition-timing-function: ease-in-out;
  }

  &-3 {
    transition-timing-function: var(--bezier-1);
  }
}

但是当webpack编译“ _link.scss”中的此部分时，失败了：

// Links
.link {
  @apply no-underline
        font-medium
        inline-block
        timing-1 duration-1 property-all;

出现错误：

ERROR in ./app/javascript/stylesheets/application.css (./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/postcss-loader/src??ref--3-2!./app/javascript/stylesheets/application.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(3:3) `@apply` cannot be used with `.timing-1` because `.timing-1` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.timing-1` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
I am guessing that the scss isn't compiled right because I am using postcss-loader instead of sass-loader or something, but I am at the edge of my knowledge with this stuff and wouldn't know how to change that even if that were the case.

这是我的“ postcss.config.js”文件：

const tailwindcss = require('tailwindcss')

module.exports = {
  parser: require('postcss-scss'),

  plugins: [
    require('postcss-import'),
    require('postcss-strip-inline-comments'),
    require('tailwindcss')('./app/javascript/stylesheets/tailwind.js'),
    require('postcss-flexbugs-fixes'),
    require('postcss-nested'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    require('autoprefixer')
  ]
}

非常感谢您的帮助！

Answer 1

这与我的输入css文件名为“ css”而不是“ scss”有关，这导致sass加载程序出现了这个奇怪的错误。

Webpack找不到SCSS和号类

1 个答案: