Question

我正在尝试找到一种方法来填充和填充我的SCSS而不将其编译为CSS。我正在使用具有postcss和postcss-scss语法的gulp。据我所知，它什么也没做。我知道我的gulp文件正在访问postcss配置，因为当我删除配置选项时，终端上会显示一条消息，提示没有插件，但是无论是否有插件，结果都是相同的。

通过使用在线前缀，我知道如果一切正常，下面的外观属性应加前缀。在执行我的gulp任务后，以下代码段完全不变。

我曾尝试对Postcss和外部配置文件使用内联配置，但似乎都无法正常工作。我将继续使用外部配置文件，因为它更易于阅读和维护。

theme.scss的摘录

.btn,
.btn-outline {
  appearance: none;
  display: inline-block;
  margin-bottom: $unit-4;
  padding: $unit-2 $unit-4;
  font-size: inherit;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: $unit-1;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  cursor: pointer;
  outline: none;
  user-select: none;

  &:active {
    transform: translateY(.125rem);
  }

  &:focus {
    box-shadow: 0 0 0 .125rem rgba(#4B4D60, .2);
  }
}

Gulp风格任务

const config = require('./config/style');
const { src, dest } = require('gulp');
const plumber = require('gulp-plumber');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const combine = require('gulp-scss-combine');
const rename = require('gulp-rename');

let task = {};

task.build = () => {
    return src(config.path.src)
        .pipe(plumber())
        .pipe(replace(/(?<=\n\s*){{(.*?)}}|(?<=\n\s*|;\s*){%(.*?)%}/g, (match) => { return '/*' + match + '*/' }))
        .pipe(replace(/(?<=:\s*){%([^;]+)%}|(?<=:\s*){{([^;]+)}}/g, (match) => { return '"' + match + '"' }))
        .pipe(postcss())
        .pipe(replace('/*{%', '{%'))
        .pipe(replace('/*{{', '{{'))
        .pipe(replace('%}*/', '%}'))
        .pipe(replace('}}*/', '}}'))
        .pipe(replace('"{%', '{%'))
        .pipe(replace('"{{', '{{'))
        .pipe(replace('%}"', '%}'))
        .pipe(replace('}}"', '}}'))
        .pipe(combine())
        .pipe(rename(config.name))
        .pipe(dest(config.path.build))
}

exports.style = task;

postcss.config.js

const postcssPresetEnv = require('postcss-preset-env');
const autoprefixer = require('autoprefixer');

module.exports = {
    syntax: require('postcss-scss'),
    plugins: [
        postcssPresetEnv({
            stage: 2
        })
    ]
}

如何在不使用gulp进行编译的情况下为SCSS加上前缀和填充？

0 个答案: