Как правильно использовать ~ в указании пути?

Question

[AlexNew22]

Как правильно использовать ~ в указании пути?
Хочу сделать общий файл стилей и подключать его в любой вложенности и любом файле одним путем
Видел как-то делают это через тильду вроде

И почему вебпак компилирует sass в js файл, а не css?
Или компиляция всего в один js это лучше?

Что-то типа import '~common.css'

Comments

[WapSter]

И зачем тебе совмещать типы файлов для разных совершенно лоадеров. Добавь просто в массив rules, объект с правилами для sass. Это все в документации описано, а ты идешь сюда чтобы тебе описали, что значат все эти свойства. Не находишь, что это ппц как тупо

Answer 1

[black1277]

Есть такая опция - алиасы называется:

resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
  },

работало в webpack 4-й версии, в пятой я не пробовал. Заменяет в скрипте 'import @/path' на полный путь. Можно попробовать так же и с тильдой.

И почему вебпак компилирует sass в js файл, а не css?

потому что вы так его настроили.

Comments

[AlexNew22]

Выдает ошибку Error: Can't resolve '~@common.css' in

resolve: {
      extensions: ['.js', '.css', '.sass', '.scss'],
      alias: {
        '@': path.join(dirname, './static')
      },
    },

css файл в который я хочу поместить common.css, который лежит в папке static
@import '~@common.css';

[black1277]

AlexNew22, ;) а зачем же вы тильду использовали, если вы её в алиасах не указали?import '@common.css';
или добавьте в алиасы
'~@': path.join(dirname, './static')

[AlexNew22]

black1277,

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): public\index.css 1:21  root stylesheet
SassError: SassError: expected "{".
  ╷
1 │ import '@common.css';

import '@common.css';

resolve: {
      extensions: ['.js', '.css', '.sass', '.scss'],
      alias: {
        '@': path.join(dirname, './static')
      },
    },

[black1277]

AlexNew22, ну а как на счет слеша? Он должен быть или между @ и common.css или на конце './static'
Короче в пятой версии тоже есть такая опция. Вот ссылка на документацию с примерами.

[AlexNew22]

black1277, я ее видел, пытался по этому примеру делать

[black1277]

AlexNew22, кстати, по поводу тильды, возможно вы путаете с импортом в самом файле css. Если написать вот так
@import "~normalize/normalize.css";
то вебпак подключит файл из папки node_modules/normalize