resolviendo la ruta de la fuente en el archivo scss cuando se usa el paquete web

3

Estoy usando webpack con mi proyecto principal asp.net mvc. Puedo agrupar archivos js. Pero no puedo resolver mis rutas de fuentes.

Tengo este archivo scss:

$font-path: '../fonts' !global; 

/*fonts*/
/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('#{$font-path}/roboto-v15-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'), url('#{$font-path}/roboto-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('#{$font-path}/roboto-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('#{$font-path}/roboto-v15-latin-300.woff') format('woff'), /* Modern Browsers */
    url('#{$font-path}/roboto-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('#{$font-path}/roboto-v15-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

Estructura de archivo:

└── Project
    ├── assets
    │ └── scripts
    │   └── main.ts
    │ └── scss
    │   └── fonts
    │       └── roboto-condensed-v13-latin-700.eot
    │   └── main.scss
    │
    └── webpack.config.js

var path = require('path');
var extractTextPlugin = require("extract-text-webpack-plugin");
var cleanWebpackPlugin = require('clean-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    entry: {
        'role/role': './assets/scripts/role/roleVM.ts',
        main: './assets/scripts/main.ts',
        vendor: ["bootstrap", "popper.js", "jquery"]
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'wwwroot/dist/')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader", options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "resolve-url-loader"
                    },
                    {
                        loader: "sass-loader", options: {
                            sourceMap: true
                        },

                    }],
                    fallback: 'style-loader'
                }),
                exclude: /node_modules/
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            }
        ]
    },
    plugins: [
        new cleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, 'wwwroot'),
            verbose: true,
            dry: false
        }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }),
        new extractTextPlugin("./css/main.css"),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'Popper': 'popper.js'
        })
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js", '.scss'],
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ]
    }
};

Cuando construyo un paquete web, aparece un error:

ERROR in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss Module not found: Error: Can't resolve '../fonts/roboto-condensed-v13-latin-700.eot' in 'C:\project\src\project\assets\scss' @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss 6:215433-215491

3
  • 1
    Parece que debería usar 1 punto en lugar de 2 para la ruta a las fuentes: $font-path: './fonts' !global; si está en un .scssarchivo en la scsscarpeta, entonces las fuentes son una subcarpeta relativa a esto, no relativa a su padre.
    GregHNZ
    12 de agosto de 2017 a las 23:43
  • No, ya lo intenté, no funcionó.
    capiono
    13 de agosto de 2017 a las 0:26
  • puede mostrar el error que ocurre con solo 1 punto. 13/08/2017 a las 13:45
2

¿Puede intentar agregar las dos opciones como se muestra a continuación?

  1. Agregue la opción entry.devtool a la configuración de su paquete web.
  2. ExtractTextPlugin tiene una opción publicPath que puede resolver este problema.

    module.exports = {
    entry: {
        'role/role': './assets/scripts/role/roleVM.ts',
        main: './assets/scripts/main.ts',
        vendor: ["bootstrap", "popper.js", "jquery"]
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'wwwroot/dist/')
    },
    devtool:'source-map', //..1. add devtool option to source-map
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    publicPath:'',
                    //2. add public path to your font folder in the build directory
                    use: [{
                        loader: "css-loader", options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "resolve-url-loader"
                    },
                        {
                            loader: "sass-loader", options: {
                            sourceMap: true
                        },
    
                        }],
                    fallback: 'style-loader'
                }),
                exclude: /node_modules/
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            }
        ]
    },
    plugins: [
        new cleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, 'wwwroot'),
            verbose: true,
            dry: false
        }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }),
        new extractTextPlugin("./css/main.css"),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'Popper': 'popper.js'
        })
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js", '.scss'],
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ]
    }
    

    };

1
  • ¿Hay alguna forma de no emitir archivos de fuentes? ¿Ignora un archivo sass font-face de node_module dep? 11/06/20 a las 6:35