gpt4 book ai didi

reactjs - 如何将基础 CSS 与 webpack 和 React 一起使用?

转载 作者:行者123 更新时间:2023-12-01 21:28:46 25 4
gpt4 key购买 nike

我的堆栈是 Horizo​​n + React。我想在我的客户端使用 Foundation 6。我的 js 使用 webpack,但是当我尝试将它与 css 一起使用时,我只得到基础 css 的注释,但没有 css。

我的文件是:

webpack.config.js:

const path = require('path');

var config = {
context: __dirname + "/src",
entry: "./js/main.js",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
resolve: {
modulesDirectories: ['./node_modules']
},
};
module.exports = config;

main.scss:

@import "../../node_modules/foundation-sites/scss/foundation";

main.js:

...
//adding css
require("../css/main.scss");
...

在网页上我只看到:

/**
* Foundation for Sites by ZURB
* Version 6.2.3
* foundation.zurb.com
* Licensed under MIT Open Source
*/

那么我做错了什么?

最佳答案

您需要@include您想要使用的部分。例如,要包含所有内容:

@include foundation-everything;

相关文档在这里:

额外提示:Webpack 允许您使用 ~ 从模块目录导入:

@import "~foundation-sites/scss/foundation";
@include foundation-everything;

关于reactjs - 如何将基础 CSS 与 webpack 和 React 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38030778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com