基础6/ Bootstrap 4-在webpack中正确使用sass设置文件
答:在webpack中正确使用sass设置文件,可以按照以下步骤进行操作:
webpack.config.js
的文件,并添加以下内容:const path = require('path');module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
};
src
的文件夹,并在其中创建一个名为index.js
的文件作为入口文件。src
文件夹中创建一个名为styles
的文件夹,并在其中创建一个名为main.scss
的文件,用于编写你的Sass样式。main.scss
文件中,你可以引入Bootstrap的Sass源文件,例如:@import '~bootstrap/scss/bootstrap';index.js
文件中,你可以引入main.scss
文件,例如:import './styles/main.scss';dist
文件夹中找到生成的bundle.js
文件。这样,你就可以在webpack中正确使用sass设置文件,并且可以使用Bootstrap 4的Sass源文件来定制你的样式。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云