Symfony: как импортировать файл Sass в каждый компонент Vue

ProgramBox

Symfony: как импортировать файл Sass в каждый компонент Vue

Post author:admin
Запись опубликована:31 января, 2023
Post category:Вопросы по программированию

#vue.js #symfony #sass

Вопрос:

В настоящее время я борюсь с этим. В моем проекте Symfony у меня есть _variables.scss файл, в котором я храню свои глобальные переменные (например, цвета).

Это включено в мой основной файл scss, подобный этому @import "variables"; , который отлично работает. Теперь я также использую VueJS в своем проекте, и я хотел бы использовать свои глобальные переменные внутри компонентов Vue. Теперь один из способов добиться этого — просто импортировать variables.scss сам:

 //CustomButton.vue
<template>
   ...
</template>

<script>
    export default {
        name: "CustomButton"
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/_variables.scss";

    //able to use variables here
</style>

Однако с растущим проектом и разными путями это кажется ненужной работой. Чего я хотел бы добиться variables.scss , так это автоматической загрузки в каждый компонент Vue.

Это довольно хорошо объяснено здесь: [css-tricks.com — Как импортировать файл Sass в каждый компонент Vue в приложении][1]

К сожалению, в моем случае это не работает (я думаю, vue.config.js полностью игнорируется) — переменные по-прежнему недоступны для использования внутри компонента Vue. Я также попытался добавить JavaScript в свой основной js-файл, куда я загружаю Vue, однако это, похоже, нарушает работу (исключение какого-то модуля).

Есть ли какой-либо конкретный способ добиться этого с помощью symfony?

PS: Я использую Symfony 5, Sass-Loader 9.0.1, Vue 2.6.12, Vue-Loader 15, Vue-Template-Compiler 2.6.12 [1]: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app /

Решение 1:

 //webpack.config.js

.enableSassLoader(options => {
    options.additionalData = `
        @import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
    `
})
```

1. Что вы используете для компиляции кода ur? поскольку вы используете Symfony, я думаю, вы могли бы использовать Encore, верно?

2. @H3lltronik да, Encore

3. @Syllz, похоже, тебе нужно поиграть с этой частью symfony.com/doc/current/frontend/encore /… из Encore docs, чтобы адаптировать мой пример конфигурации к вашим потребностям. К сожалению, я не знаком с symfony Encore.

4. Вы перезапустили сервер разработки после добавления этого кода? Потому что я работаю на себя.

Ответ №1:

Конфигурация Webpack:

 module.exports = {
...
    module: {
        rules: [
            {
                test: /.scss$/,
                use: [
                  process.env.NODE_ENV !== 'production'
                      ? 'vue-style-loader'
                      : MiniCssExtractPlugin.loader,
                  'css-loader',
                  {
                      loader:  'sass-loader',
                      options: {
                          data: `
                              @import "functions";
                              @import "variables";
                              @import "mixins";
                          `,
                          includePaths: [
                              path.resolve(__dirname, "../asset/scss/framework")
                          ]                      
                      }
                  }
                ]
            },        
        ]
}

эта конфигурация импортирует 3 файла: «_functions.scss», «_variables.scss», «_mixins.scss» из папки "../asset/scss/framework" , и нет необходимости использовать @import "../../scss/_variables.scss"; их каждый раз в ваших компонентах vue. Возможно, вы адаптируете эту конфигурацию webpack к своим потребностям или получите какую-то идею для решения вашей проблемы.

1. @webprogrammar привет, спасибо за ваш удивительный ответ. это действительно мне очень помогло, и после некоторых исследований у меня теперь есть действительно простое решение для symfony. Я тоже попробовал ваше решение, однако в моем случае путь разрешен неправильно. в конце у меня всегда есть что-то вроде @import c:...assetsscss_variables.scss вместо @import c:/.../assets/scss/_variables.scss . Итак, косая черта / обратная косая черта в моем случае неверны — я не знаю почему:/ Однако я обновлю свой ответ решением, которое я нашел. Может быть, у кого-то даже есть лучший способ. Но еще раз спасибо! 🙂

Ответ №2:

Это то, что вам нужно c:

Поскольку вы используете Encore, измените webpack.config.js , добавьте этот код

 var Encore = require('@symfony/webpack-encore');

Encore.configureLoaderRule('scss', (loaderRule) => {
    loaderRule.oneOf.forEach((rule) => {
        rule.use.push({
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // Change this url to your _variables.scss path
                    path.resolve(__dirname, './assets/app/styles/_vars.scss'),
                ]
            },
        })
    })
})

Вам также придется установить sass-resources-loader

 npm install sass-resources-loader

Затем скомпилируйте свой код еще раз, и ваши переменные sass будут доступны везде

Ответ №3:

Решение моего вопроса:

 //webpack.config.js

.enableSassLoader(options => {
    options.additionalData = `
        @import "./assets/scss/_variables.scss"; //path.resolve is not working in my case to import the absolute path
    `
})

это позволит импортировать файл в каждый шаблон sass компонент vue