Question

我正在尝试使用webpack从我网页上的npm库dist / css文件夹中导入css文件。我的项目结构如下所示：

dist

src

---样式

--- --- app.css

-----docs.min.css

--- docs.min.js

--- index.html

--- index.js

webpack.config.js

package.json

我尝试了几件事，但仅引用index.js中的node_modules文件夹似乎会产生结果。

index.js：



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');

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中的文件

我无法将所有这些放在一起正确地引用我的文件。我尝试引用的lib包含可能直接在网页中使用的scss文件。有没有办法使用webpack编译它们，而不使用dist文件夹中提供的css文件提供的库来编译它们？

这是我的webpack.config.js：

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')
    }
}

也许有人有想法或进一步的指示。我会用全部这些东西来创建一个引导库，并为我的公司重新命名。

谢谢。

如何使用Webpack在我的站点上访问来自node_modules中的库的CSS或CSS

0 个答案: