Подключаю шрифты в webpack в scss?

Question

[Sergey S19S93]

Добрый день !
ПОдключаю шрифт в сборку webpack , но происходит ощибка уже все перепробывал


webpack config.js

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    app: './src/index.js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      }, {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, "css-loader"
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'assets',
          outputPath: 'images',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: 'assets',
        }
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader, {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            // options:{sourceMap:true}
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
      },

    ]
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },


  devServer: {
    client: {
      overlay: true
    },
    static: {
      directory: path.join(__dirname)
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ]
}

fonts.scss

// HelveticaNeueCyr - BLACK
    @font-face {
        font-family: "HelveticaNeueCyr-Black";
        // src: url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.eot'); /* IE9 Compat Modes */
        // src: url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        //      url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.woff') format('woff'), /* Pretty Modern Browsers */
        //      url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
             //  url('/assets/fonts/HelveticaNeueCyr/Black/HelveticaNeueCyr-Black.svg') format('svg'); /* Legacy iOS */
            src: url('../../fonts/helveticaneuecyr-black.ttf') format('ttf'); /* Legacy iOS */
      }

main.scss
@import 'utils/fonts';

Comments

[Сергей delphinpro]

Подключаю шрифты в webpack в scss?

----------

https://qna.habr.com/help/rules

3. В процессе создания вопроса пользователь Сервиса обязан:
3.6. Соблюдать нормы русского языка и принципы построения вопросительных предложений. Формулируя текст вопроса не следует злоупотреблять ПРОПИСНЫМИ БУКВАМИ. Также следует понимать, что само по себе добавление вопросительного знака не превращает любое предложение в вопрос, поэтому следует использовать порядок слов, характерный для вопросительных предложений.

Answer 1

[Михаил Р.]

В моем варианте так:

@font-face {
  font-family: roboto_regular;
  font-style: normal;
  font-weight: normal;
  src:
    local("roboto"),
    local("roboto regular"),
    local("roboto_regular"),
    local("roboto-regular"),
    url("~src/fonts/roboto.woff2") format("woff2"),
    url("~src/fonts/roboto.woff") format("woff");
}

~src - это алиас из конфига webpack:

module.exports = () => {

// ...

    resolve: {
      alias: {
        src: path.resolve(__dirname, "src"),
      },
    },

// ...

}

В Вашем случае будет так:

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    app: './src/index.js'
  },

  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
  
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/'
    }, {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader, "css-loader"
      ],
    },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'assets',
          outputPath: 'images',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: 'assets',
        }
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader, {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            // options:{sourceMap:true}
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
      },

    ]
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },


  devServer: {
    client: {
      overlay: true
    },
    static: {
      directory: path.join(__dirname)
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ]
}

Comments

[Sergey S19S93]

сделал как у вас но не работает

[Михаил Р.]

s19s93, не как у меня.

В Вашем случае будет так:

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    app: './src/index.js'
  },

  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
  
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/'
    }, {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader, "css-loader"
      ],
    },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'assets',
          outputPath: 'images',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: 'assets',
        }
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader, {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            // options:{sourceMap:true}
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
      },

    ]
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },


  devServer: {
    client: {
      overlay: true
    },
    static: {
      directory: path.join(__dirname)
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ]
}

[Sergey S19S93]

Михаил Р., спасибо помогло

[Сергей delphinpro]

s19s93, https://qna.habr.com/help/rules

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег < code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/).
Размещение фрагментов кода в виде изображений запрещено.