1
votes

Comment puis-je transmettre des variables d'environnement au fichier scss / sass en utilisant laravel mix et webpack?

J'ai une variable d'environnement CDN_URL et je souhaite envoyer cette variable dans le fichier SCSS. J'ai aussi essayé prependData de sass-loader.

Je dois utiliser Laravel 5.7, Laravel Mix 4.1.2 et webpack 4.27.1

Erreur: CSS invalide après "... charger les styles" : attendu 1 sélecteur ou at-rule, était "var content = requi"

Voici mon code de fichier 'webpack.mix.js'.

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

});

Voici mon code de fichier '_functions.scss':

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 + ';',
                    },
                },
            ],
        },
    ],
},

laravel webpack laravel-mix webpack-4 scss-lint

0 commentaires

3 Réponses :

-1
votes

Vous pouvez injecter des variables d'environnement dans Laravel Webpack Mix en préfixant une clé dans votre fichier .env avec MIX_. Une fois la variable définie dans votre fichier .env, vous pouvez accéder via l'objet process.env .

Donc, dans votre exemple, vous devez créer une nouvelle variable dans le fichier .env comme MIX_CDN_URL et dans webpack.mix.js vous pouvez y accéder en utilisant

process.env.MIX_CDN_URL

Vous pouvez sass-loader qui vous permettra d'obtenir les résultats que vous désirez.

1 commentaires

processus est une chose nodejs, OP cherche un moyen de le transmettre à SASS et non à Javascript

1
votes

Vous pouvez ajouter des données à SASS en utilisant sass-loader

Par exemple pour passer le CDN_URL de .env

Etendez 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 + ';',
            },
          },
        ],
      },
    ],
  },
};

3 commentaires

J'utilise ceci mais j'obtiens l'erreur ci-dessous: CSS invalide après "... load the styles": attendu 1 sélecteur ou at-rule, était "var content = requi" J'ai utilisé Laravel 5.7, Laravel Mix 4.1.2 et webpack webpack 4.27.1.

Nous ne pouvons pas dire si vous n'incluez pas votre fichier SASS

_functions.scss: `` @function asset ($ type, $ file) {@return url ('# {$ cdn-s3-static-url} # {$ asset-base-path} # {$ type} / # {$ fil‌ e} '); } `` `

0
votes

Dans mon cas, je dirigeais un site Gatsby. Avant chaque build, il exécute gatsby-config.js, qui a accès aux variables d'environnement.

Donc, en haut du fichier .js qui construit, avant module.exports, je mets ceci:

@import './build-style.scss';
@font-face {
  font-family: "MyFontFamily";
  src: url($root + "font/MyFontFamily.woff") format('woff');
}

Cela donne un fichier qui ressemble à:

$root: "/development-path/";

Ensuite, dans les fichiers SCSS où j'avais besoin d'un comportement dépendant d'ENV, j'ai: p>

if(process.env.NODE_ENV === 'development') {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}

Et maintenant, mon élément (la police dans cet exemple) se charge à partir de différents endroits en fonction de ma variable d'environnement de développement / production.

Cela ressemble à un gros hack et Je suis sûr qu'il y a un moyen plus correct quelque part, mais cela m'a fait bouger à nouveau après une heure d'arrêt et cela fonctionne jusqu'à présent. Je vais probablement l'étendre à l'avenir pour avoir build-style-dev.scss , build-style-prod.scss , et les copier simplement dans build- style.scss au moment de la compilation. Ou faites des recherches dans le bon sens.

0 commentaires