Я пытаюсь импортировать файл css из папки dist / css библиотеки npm на моей веб-странице с помощью веб-пакета. Структура моего проекта выглядит следующим образом:
расстояние
ЦСИ
--- стили
--- --- app.css
--- --- docs.min.css
--- docs.min.js
--- index.html
--- index.js
webpack.config.js
package.json
Я попробовал несколько вещей, и только ссылка на папку node_modules в моем index.js, похоже, дает результат.
index.js:
</p>
<pre><code>import './../node_modules/lib-bootstrap4/dist/css/rwth-theme.css';
//@import '~lib-bootstrap4;
import './styles/docs.min.css';
import './styles/app.css';
window.$ = window.jQuery = require('jquery'); // required for bootstrap
window.Popper = require('popper.js'); // required for tooltip, popup...
require('lib-bootstrap4');
require('Docs');
Но я не очень доволен этим. Я нашел много ключевых слов, таких как mini-css-extract-plugin, postcss loader, sass-loader или использование @import для ссылки на файлы в node_modules с помощью ~
Я не могу собрать все это вместе, чтобы правильно сослаться на мой файл. Библиотека, на которую я пытался ссылаться, содержит файлы scss, которые могут использоваться непосредственно на веб-странице. Есть ли способ скомпилировать их с помощью веб-пакета и использовать их вместо библиотек, предоставленных css-файлов в его папке dist?
Вот мой webpack.config.js:
</p>
<pre><code>const webpack = require('webpack');
const path = require('path');
module.exports = {
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", // Used for Bootstrap JavaScript components
jQuery: "jquery", // Used for Bootstrap JavaScript components
Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
})
],
resolve: {
alias: {
'lib-bootstrap4': 'lib-bootstrap4/dist/js/bootstrap.min.js',
// this remains to easy switch between bootstrap versions, adding the sources to the app happens
// in index.js
'bootstrap': 'bootstrap/dist/js/bootstrap.min.js',
Docs: path.resolve(__dirname, 'src/docs.min.js')
}
}
}
Может быть, у кого-то есть идея или дальнейшие инструкции. Я делаю все это, чтобы создать библиотеку начальной загрузки с небольшим ребрендингом для моей компании.
Спасибо.