作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的堆栈是 Horizon + 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/
我是一名优秀的程序员,十分优秀!