小编Ali*_*aur的帖子

我最近使用webpack和bootstrap v4.0.0-alpha.6进行了配置工作正常,直到今天我尝试更改为v4测试版,现在我似乎无法使其正常工作:(我有这个配置:

webpack.config.js

entry: {
    app: "./src/app.js"
},
output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
    loaders: [
        { test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
        { test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
        {   test: /\.(css|scss|sass)$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'postcss-loader', 'sass-loader']
            }),
            exclude: /node_modules/
        }           
    ]
},
plugins: [
    new webpack.ProvidePlugin({ // inject ES5 modules as global vars
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    }),
    new ExtractTextPlugin('/css/[name].css'), …

我已经安装了bootstrap v4 beta和popper.js(tooltip.js)库.我正在尝试使用它的工具提示功能.所以我设法让它出现,但我不能改变它的外观/风格为我的生活.我已多次查看他们的文档,但我无法弄明白.(我只是讨厌一个没有例子的所谓"文档").所以这是我的HTML:

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

我在js中的数据切换上激活了它:

$(function() {
    $('[data-toggle="tooltip"]').tooltip()
})

我注意到,当工具提示出现时,使用类"tooltip ..."创建了一个新的div,所以我认为我可以将该类作为目标并在我的scss中设置样式,所以:

.tooltip {
    background-color: #DB2828;
    color: $green;  
}

不是我想要的样式选项,只是经过测试才能看到它的效果......结果如下:

同样的黑色背景与我背后的测试背景......有人可以帮我解决这个问题吗？非常感谢.