Question

我的堆栈是Horizon + React。我想在我的客户端使用基础6。我使用webpack作为我的js，但是当我尝试将它与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
 */

那么我做错了什么？

Answer 1

您需要public class MainActivity extends AppCompatActivity implements View.OnClickListener { private static final int RESULT_LOAD_IMAGE = 1; ImageView imageToUpload, downloadedImage; Button bUploadImage, bDownloadImage; EditText uploadImageName, downloadImageName; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageToUpload = (ImageView) findViewById(R.id.imageToUpload); downloadedImage = (ImageView) findViewById(R.id.downloadedImage); bUploadImage = (Button) findViewById(R.id.bUploadImage); bDownloadImage = (Button) findViewById(R.id.bDownloadImage); uploadImageName = (EditText) findViewById(R.id.etUploadName); downloadImageName = (EditText) findViewById(R.id.etDownloadName); imageToUpload.setOnClickListener(this); bUploadImage.setOnClickListener(this); bDownloadImage.setOnClickListener(this); } @Override public void onClick(View v) { switch(v.getId()){ case R.id.imageToUpload: Intent galleryIntent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(galleryIntent, RESULT_LOAD_IMAGE); break; case R.id.bUploadImage: Bitmap Image = ((BitmapDrawable) imageToUpload.getDrawable()).getBitmap(); break; case R.id.bDownloadImage: break; } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == RESULT_LOAD_IMAGE && resultCode ==RESULT_OK && data != null) { Uri selectedImage = data.getData(); imageToUpload.setImageURI(selectedImage); } } private class UploadImage extends AsyncTask<Void, Void, Void>{ Bitmap image; String name; public UploadImage(Bitmap image, String name) { this.image = image; this.name = name; } @Override protected void onPostExecute(Void aVoid) { super.onPostExecute(aVoid); } @Override protected Void doInBackground(Void... params) { ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); image.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream); String encodedImage = Base64.encodeToString(byteArrayOutputStream.toByteArray(), Base64.DEFAULT); ArrayList<NameValuePair> dataToSend = new ArrayList<>(); dataToSend.add(new BasicNameValuePair("image")); return null; } } }要使用的部分。例如，要包含所有内容：

@include

如何在webpack中使用基础css并做出反应？

2 个答案: