Webpack Less-Loader с Style-Loader без добавления тега <style>
Я пытаюсь получить наши файлы.less less-loader
затем css-loader
и, наконец, вводится в файл HTML style-loader
, в соответствии с документами Less Loader.
Я не получаю никаких ошибок или предупреждений, но стили не вводятся и не присутствуют каким-либо образом.
Мой конфиг веб-пакета выглядит следующим образом под module.rules[]...:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader",
// options: {
// paths: [
// path.resolve(__dirname, '../less')
// ]
// } // compiles Less to CSS
}]
},
}
мой resolve
как следует
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
'@': resolve('public/js'),
},
modules: ['less', 'node_modules']
},
Я также пытался, под modules
, path.resolve(__dirname, '../less')
Моя структура каталогов
project/build/webpack.config.js
project/less/*.less
(меньше файлов)
Я также попытался с прокомментированными "параметрами" выше без комментариев, чтобы указывать непосредственно на каталог поменьше, в соответствии с документами для менее загруженных.
Чего мне не хватает, чтобы эти менее стили были скомпилированы в CSS и вставлены как тег стиля?
Я включил тест.css, потому что мне любопытно, может быть, там происходит какой-то конфликт. Он используется для добавления файла начальной загрузки css из node_modules, который работает правильно.
(Я старался, чтобы код был кратким и включал только соответствующие части - рад предоставить больше)
1 ответ
Вам необходимо импортировать .less
файлы в вашем .js
файлы таким образом загрузчик webpack найдет их и заставит работать.
Здесь у меня есть репозиторий с некоторой конфигурацией, и я думаю, что он поможет вам с некоторыми проблемами, с которыми вы столкнетесь позже. (Да, это становится немного более диким)
С уважением.