Webpack + Бэм + Sass переменные и миксины. Как собрать проект?

Question

[tanasov49]

Появилась сложность при сборке проекта.
Суть следующая. Собираю проект при помощи БЭМ и SASS.
В глобальном файле index.scss переменные и миксины определяются. Но кода я начинаю использовать другие переменные в другом файле SCSS этого же проекта. Он их не видит.

index.scss

import url(../vendor/normalize.scss);
import url(../fonts/fonts.scss);
import '../mixins/variables';
import url(../blocks/header/header.scss);
import url(../blocks/logo/logo.scss);
import url(../blocks/nav-menu/nav-menu.scss);
import url(../blocks/menu-list/menu-list.scss);
import url(../blocks/menu-list/__link/menu-list__link.scss);


body {
    max-width: $widthPage;
    font-family: 'Roboto', sans-serif;
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: { main: './src/pages/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
        publicPath: ''
  },
    mode: 'development',
  devServer: {
    static: path.resolve(__dirname, './dist'),
    compress: true,
    port: 8080,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
        type: 'asset/resource'
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
  ]
};

Как мне заставить webpack видеть глобальные переменные и миксины в моем проекте?
Например вот в этом файле menu-list__link.scss.

Comments

[Александр Васильев]

Столкнулся с этим перейдя с less, где все нормально было. В итоге в каждом scss-компоненте приходится импортировать файл с переменными.
Не удобно, но терпимо.

Answer 1

[Сергей delphinpro]

Должно работать.
Зачем вы используете import url()?
Просто import 'file.scss'; как вы сделал с файлом variables

Да и вообще, в sass директива импорта, как и все другие пишется с собачкой

@import 'file.scss'

Comments

[tanasov49]

Человечище огромное спасибо тебе. Я потратил уйму времени. Где же ты был раньше))

[cssfish]

все верно, @import достаточно в основном scss файле. более того, там даже расширений указывать не надо - зацепит и scss и css файлы.

[Александр Васильев]

спасибо, у меня тоже все ок теперь. Заменил use на import