webpack - 使用 webpack 和 twig 覆盖 Vuetify SASS 变量-6ren

webpack - 使用 webpack 和 twig 覆盖 Vuetify SASS 变量

转载作者：行者123 更新时间：2023-12-03 14:47:58

25

4

我有 Vuetify 2.2.11，我正在尝试覆盖他们的 SASS 变量。我在一个 Symfony 3.x 项目中，所以我没有使用 vue-cli 安装 Vuetify。我关注了Webpack install guide但我似乎无法让它发挥作用。 Vuetify 样式被转储到一个 css 文件(以我的 js 命名: app.js -> app.css )，但我的覆盖没有考虑在内。至于我的项目样式( company.scss )，它们被注入(inject)到 <style type="text/css"> 中。 html中的标签。还有一大堆空的<style type="text/css"></style>标签，我猜它们来自每个 Vuetify 组件，但我不知道为什么它们是空的。

这就是我的代码的样子:

// /assets/js/app.js

import Vue from 'vue';
import vuetify from './plugins/Vuetify';
import FooComponent from './components/FooComponent;

import '../styles/company.scss';

const vmConfig = {
    el: '#app',
    vuetify,
    components: {
        FooComponent
    },
};

new Vue(vmConfig);

// /assets/js/plugins/Vuetify

import Vue from 'vue';

// We import from "lib" to enable the "a-la-carte" installation.
// But even tough we use vuetify-loader we still need to manually specify VApp because it's used in a twig template and the loader doesn't read it.
import Vuetify, { VApp } from 'vuetify/lib';

Vue.use(Vuetify, {
    components: {
        VApp
    }
});

export default new Vuetify({
    icons: { iconfont: 'md' }
});

/* /assets/styles/variables.scss */

$font-size-root: 30px;
$body-font-family: 'Times New Roman';

@import '~vuetify/src/styles/styles.sass';
/*@import '~vuetify/src/styles/settings/variables'; // I tried this one instead and it didn't work either*/

/* /assets/styles/company.scss */

#foo-component {
    background-color: pink;
}

{# /app/Resources/views/app.html.twig #}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="all" href="{{ asset("build/app.css") }}" />
    </head>
    <body>
        <div id="app">
            <v-app>
                {% block main %}
                    <h1>My page</h1>
                    <foo-component></foo-component>
                {% endblock %}
            </v-app>
        </div>

        {% block footer_js %}
            <script type="text/javascript" src="{{ asset("build/app.js") }}"></script>
        {% endblock %}
    </body>
</html>

// webpack.config.js

const Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const webpack = require('webpack');
let path = require('path');

Encore    
    .setOutputPath('web/build/')
    .setPublicPath('/build')    
    .addEntry('app', './assets/js/app.js')
    .disableSingleRuntimeChunk()
    .enableVueLoader()
    .addPlugin(new VuetifyLoaderPlugin())
    .enableSassLoader()
    .addAliases({
        'vue$': 'vue/dist/vue.esm.js'
    })
    .configureBabel(null, {
        includeNodeModules: ['debug', 'vuetify'] // to make it work in IE11
    })
    .configureLoaderRule('sass', loaderRule => {
        loaderRule.test = /\.sass$/;
        loaderRule.use = [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    data: "@import '" + path.resolve(__dirname, 'assets/styles/variables.scss') + "'",
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true
                }
            }
        ];
    })
;

let config = Encore.getWebpackConfig();
config.module.rules.push({
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                data: "@import '" + path.resolve(__dirname, 'assets/styles/variables.scss') + "';",
                implementation: require('sass'),
                fiber: require('fibers'),
                indentedSyntax: false
            },
        },
    ]
});

module.exports = config;

最佳答案

好吧，我终于让它工作了。方法如下:webpack.config.js :
您需要在这里做的就是.enableSassLoader() . config options described here实际加载但变量声明无效的地方。app.js只需包括您的样式:

import '../styles/company.scss';

variables.scss我已经创建了这个文件并将所有 vuetify 特定变量移到那里。您可以使用 the official example . company.scss这是诀窍:

@import './assets/css/variables.scss';
@import '~vuetify/src/styles/main.sass'; // include this after your variables

就是这样。
我注意到热重新加载不适用于变量的更改。但只要这些变量有效，那就没问题了。我从 this page about the color pack 那里得到了提示

关于webpack - 使用 webpack 和 twig 覆盖 Vuetify SASS 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60228807/

25

4

0

文章推荐： jupyter-lab - JupyterLab 中是否有等效于腹地笔记本扩展？

文章推荐： python - 如何从 SAM 本地中的另一个 lambda 调用 AWS lambda？

文章推荐： android - 如何在 react-native 上使用 svg 图像？

sass - gulp-sass 不编译 sass 文件
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情，比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。这是我的代码示例: gulp.
继往开来的 Sass 3 代编译器：Ruby Sass、Node-Sass、Dart-Sass
为了简化样式的描述，浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单，但在很多方面都不太方便，比如不支持嵌套，代码比较冗余;不支持继承和混合，代码不好复用等。为了给 c
sass - 介绍 Sass 模块 - 问题 sass-migrator
如何编译sass模块(新版sass)？ https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端，但它没有编译 ht
sass - SASS 错误消息如何显示在浏览器中？
在 SASS 中，当出现错误时，它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。错误文本是如何呈
sass - 我如何在不观看文件的情况下编译.sass
我想决定何时编译.sass文件。换句话说，我不想看文件，而是手动编译。我该怎么做？最佳答案它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
sass - Sass 中具有可变参数列表的一个属性的多个值
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
sass - 如何在不安装的情况下运行 SASS？
我想在我们公司的 Web 应用程序上使用 SASS，但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序，并且还需要 HAML。我希望找到一个脚本
sass - 更改 SASS 的 sass-cache 位置
From the docs我看到您可以更改 SASS 的缓存位置。但是，我不确定要使用的确切语法。我有一个 Zurb 基金会项目，随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
sass - SASS 可以合并属性吗？
也许更好的问题是，有没有更有效的方法来覆盖 mixin 的一部分？这段SCSS: @mixin button { .button { background-color: red;
sass - SASS 中的多行注释抛出错误
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
sass - 有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass (sass-loader 的默认值)？
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
sass - SASS 中的多行注释抛出错误
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
sass - 有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass (sass-loader 的默认值)？
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
sass - 如何在括号文本编辑器中安装 Sass
重复问题？是的。但与this有点不同概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。看了J
sass - Sass 中具有可变参数列表的一个属性的多个值
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
sass - sassOptions 中的数据选项在升级到 v3 后停止在 gatsby-plugin-sass 中工作，并用 sass 替换了 node-sass
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
sass - 如何向 Sass 添加自定义函数(通过 Sass::Script::Functions)？
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.)，但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员，但我确实找到了一个其他人编写的函数，
sass - 在运行 gulp-sass 时，如何找出我使用的 Sass 版本？
我刚开始使用gulp-sass ，是否有一种“简单”的方法来找出正在使用的 Sass 版本？并不是说我认为这太重要了，但我正在使用 gulp-sass在 Visual Studio 2015 (CT
sass - grunt-contrib-sass 和 grunt-sass 的区别
我正在为 sass 实现 grunt 插件到 css 处理，但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。我在互联网上搜索但找不到任何相关答案 grunt-c
sass - 在 sass 函数中使用 css 变量 - node-sass
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken())，据我所知，最新版本的 LibSass 允许这样做。我已安装 node-sas

首页

博学

6Ren·AI

商城

webpack - 使用 webpack 和 twig 覆盖 Vuetify SASS 变量