Webpack не находит амперсанд класса SCSS - PullRequest
Новая
       28

Webpack не находит амперсанд класса SCSS

0 голосов
/ 27 мая 2019

Я перенесу некоторый код SCSS, который был написан для нашей команды, в наше приложение rails с webpacker (которое запускает webpack) и столкнулся с некоторыми проблемами.Это, вероятно, довольно просто, но я немного незнаком с SCSS и веб-пакетом в целом, поэтому он вызывает некоторые головные боли.

У меня есть файл 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')
  ]
}

Любая помощь очень ценится!

1 Ответ

0 голосов
/ 29 мая 2019

Это было связано с тем, что мой входной css-файл назывался "css", а не "scss", из-за чего загрузчик sass выдал эту странную ошибку.

...