Как я могу передать переменные окружения в файл scss / sass, используя laravel mix и webpack? - PullRequest
Новая
       46

Как я могу передать переменные окружения в файл scss / sass, используя laravel mix и webpack?

1 голос
/ 30 сентября 2019

У меня есть переменная окружения CDN_URL, и я хочу отправить эту переменную в файл SCSS. Я также пробовал prependData sass-loader.

Я должен использовать Laravel 5.7, Laravel Mix 4.1.2 и webpack 4.27.1

Ошибка: Неверный CSS после "... загрузитьstyles ": ожидаемый 1 селектор или правило, было" var content = Requi "

Ниже приведен код моего файла 'webpack.mix.js'. 

mix.webpackConfig({
module: {
    rules: [
        {
            test: /\.s[ac]ss$/i,
            use: [
                'vue-style-loader',
                'style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        indentedSyntax: true,
                        prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
                    },
                },
            ],
        },
    ],
},

});

Ниже приведен мой код файла '_functions.scss': 

@function asset($type, $file) {
 @return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Вы можете добавить данные к SASS, используя sass-loader

Например, чтобы передать CDN_URL из .env

Расширить webpack.mix.js


module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: '$env: ' + process.env.CDN_URL + ';',
            },
          },
        ],
      },
    ],
  },
};
0 голосов
/ 30 сентября 2019

Вы можете добавить переменные окружения в Laravel Webpack Mix, добавив префикс ключа в вашем файле .env с помощью MIX_. После того, как переменная была определена в вашем файле .env, вы можете получить доступ через объект process.env.

Так что в вашем примере вы должны создать новую переменную в файле .env, например MIX_CDN_URL и внутри webpack.mix.jsВы можете получить к нему доступ, используя 

process.env.MIX_CDN_URL

Вы можете sass-loader , который достигнет желаемых результатов.

...