Как удалить @charset в файле CSS при запуске npm? - PullRequest
Новая
       30

Как удалить @charset в файле CSS при запуске npm?

0 голосов
/ 24 июня 2019

Я использую Laravel 5.7 и применяю AMP для нашего сайта. (https://amp.dev/).

Я выполняю следующие шаги для преобразования HTML в AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites

Одним из требований является замена внешних таблиц стилей на внутренние таблицы стилей (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). Я сделал это, выполнив следующий код: 

<style amp-custom>
    {!! file_get_contents(public_path('css/app.css')) !!}
</style>

Я использую Sass и использую микс Laravel для компиляции своих активов.

Это мой webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()
   .version();

Но после этого я столкнулся с ошибкой в ​​AMP: 

CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@charset'.

Чтобы решить эту проблему, я должен удалить @charset "UTF-8"; в скомпилированном css css/app.css. И кажется, что работает npm run dev, автоматически добавляя @charset "UTF-8"; вверху файла. Как мне это убрать?

Я думаю, что мне нужно добавить код в webpack.mix.js, чтобы удалить это. Но я понятия не имею, как это сделать.

1 Ответ

1 голос
/ 25 июня 2019

Да!SASS добавляет эту директиву, если ваш SASS содержит какие-либо расширенные (например, не стандартные ASCII) символы.В проекте SASS есть открытая проблема, чтобы предоставить возможность , а не сделать это ... но они сказали, что не предоставят такую ​​возможность.

На данный момент это довольно легкочтобы исправить ... просто добавьте шаг, который ваш процесс сборки ищет для @charset "UTF-8"; и удаляет.Вы можете увидеть, как я это сделал здесь:

https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63

gulp.task('styles', function buildStyles() {
    const cssEncodingDirective = '@charset "UTF-8";';

    return gulp.src(paths.css.src)
... (stuff removed)
        .pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
...