cómo usar resolve-url-loader con sass y vue js

2

En primer lugar, aquí está mi estructura de directorios:

ingrese la descripción de la imagen aquí

Estoy tratando de importar index.cssdesde cada una de las carpetas src/renderer/res/fontspara poder usar fuentes personalizadas en mi aplicación Electron.

src / renderer / res / theme / text.scss:

@import "../font/fira-sans/index.css";
@import "../font/clear-sans/index.css";
@import "../font/aileron/index.css";
$font-base: "Fira Sans";
$font-ui: "Clear Sans";
$font-header: "Aileron";

Entonces puedo importar text.scssdesde src/renderer/res/theme/theme.scss, e importación theme.scssde un componente de un solo archivo JS Vue en src/renderer/component/:

<style lang="scss">

@import "../res/theme/theme.scss";

// other styles which depend on sass variables defined in the SCSS above

</style>

He incluido resolve-url-loaderen mi cadena de cargador:

    {
        test: /\.scss$/,
        use: [
            "css-hot-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
                loader: "resolve-url-loader",
                options: {
                    debug: true,
                    root: path.join(__dirname, "src/renderer"),
                }
            },
            "sass-loader"
        ]
    },
    {
        test: /\.vue$/,
        use: {
            loader: "vue-loader",
            options: {
                loaders: {
                    scss: [
                        "vue-style-loader",
                        "css-loader",
                        {
                            loader: "resolve-url-loader",
                            options: {
                                debug: true,
                                root: path.join(__dirname, "src/renderer"),
                            }
                        },
                        "sass-loader"
                    ]
                }
            }
        }
    },

Y, sin embargo, independientemente de lo que intente, constantemente obtengo errores como este:

ERROR in ./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) Module not found: Error: Can't resolve '../font/fira-sans/index.css' in 'I:\git\Personal Projects\rain-notes\src\renderer\component' @ ./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 3:10-92

Intenté envolver las importaciones con url():

@import url ("../ font / fira-sans / index.css");

Intenté usar una tilde:

@importar "~ res / font / fira-sans / index.css";

Intenté eliminar la .cssextensión, lo que provocó errores de resolución dentro de index.css:

ERROR in ./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) Module not found: Error: Can't resolve './fira-sans-regular.ttf' in 'I:\git\Personal Projects\rain-notes\src\renderer\component' @ ./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 8:95-129

¿Por qué está pasando esto? ¿Cómo puedo resolve-url-loaderresolver mis URL correctamente?

-1

Intente usar "~ @ assets /" o "@ assets /"

@import "[email protected]/font/fira-sans/index.css";
@import "[email protected]/font/clear-sans/index.css";
@import "[email protected]/font/aileron/index.css";
$font-base: "Fira Sans";
$font-ui: "Clear Sans";
$font-header: "Aileron";

y

<style lang="scss">

@import "[email protected]/res/theme/theme.scss";

// other styles which depend on sass variables defined in the SCSS above

</style>

De https://github.com/chrisvfritz/vue-enterprise-boilerplate/issues/125

Editar:

En realidad, mirándolo ahora. Tuve un problema similar y en su lugar usé el "cargador de estilo vue" en lugar de los otros cargadores. Lo que solucionó el problema para mí. Creo que es posible que tengas que hacer algo diferente para la producción y el desarrollo. Pero por ahora solo inténtalo ...

    {
        test: /\.scss$/,
        use: [
           "vue-style-loader"
        ]
    },
    {
        test: /\.vue$/,
        use: {
            loader: "vue-loader",
            options: {
                loaders: {
                    scss: [
                        "vue-style-loader"
                    ]
                }
            }
        }
    },
    ```

Do you have a vue-loader.conf.js?
1
  • Revisado según su solicitud. nallok 3 de julio de 2019 a las 5:59